locked
hide a table row RRS feed

  • Question

  • User-327228494 posted

    How do i hide a table row in asp.net web application.

     

    I provided an ID to table row but unable to find that Id.

     

    I tried the Find Control, but couln't make it.


    Monday, February 28, 2011 7:58 PM

Answers

  • User1224194097 posted

    Specify a ID for the TableRow and add runat="server" and use that ID directly in code behind. No need to use FindControl.

    <table>
        <tr id="trHeader" runat="server">
            <td>
                Something here
            </td>
        </tr>
    </table>

    You can set Visible to false in page codebehind

    protected void Page_Load(object sender, EventArgs e)
    {
        trHeader.Visible = false;
    }

    You can also hide the table Row using Javascript as well

    <a href="#" onclick="document.getElementById('<%= trHeader.ClientID %>').style.display='none';">
        Hide Row</a>

     

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 28, 2011 11:32 PM
  • User348806598 posted

    Hi,

    See the below HTML-

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Untitled Page</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#tbl input[type=button]").click(function() {
                    if (confirm("Are you sure?"))
                        $(this).closest("tr").remove();
                })
                $("#btn").click(function() {
                    if (confirm("Are you sure?")) {
                        $("#tbl input[type=checkbox]:checked").closest("tr").remove();
                    }
                })
    
            });
            function removeElement(parentDiv, childDiv) {
                document.getElementById(childDiv).style.display = "none";
    //            if (childDiv == parentDiv) {
    //                alert("The parent div cannot be removed.");
    //            }
    //            else if (document.getElementById(childDiv)) {
    //                var child = document.getElementById(childDiv);
    //                var parent = document.getElementById(parentDiv);
    
    //                (parent.getElementsByTagName('tbody')[0]).removeChild(child);
    //            }
    //            else {
    //                alert("Child div has already been removed or does not exist.");
    //                return false;
    //            }
            } 
        </script>
    </head>
    <body>
    <table style="width: 100%;" id="tbl">
        <tr><td><input type="checkbox" /></td><td>value 1</td><td><input type="button" value="Delete Row" /></td></tr>
        <tr><td><input type="checkbox" /></td><td>value 2</td><td><input type="button" value="Delete Row" /></td></tr>
        <tr><td><input type="checkbox" /></td><td>value 3</td><td><input type="button" value="Delete Row" /></td></tr>
        <tr><td><input type="checkbox" /></td><td>value 4</td><td><input type="button" value="Delete Row" /></td></tr>
        <tr id="specificID"><td><input type="checkbox" /></td><td>value 5</td><td><input type="button" value="Delete Row" /></td></tr>
        <tr><td><input type="checkbox" /></td><td>value 6</td><td><input type="button" value="Delete Row" /></td></tr>
        <tr><td><input type="checkbox" /></td><td>value 7</td><td><input type="button" value="Delete Row" /></td></tr>
        <tr><td><input type="checkbox" /></td><td>value 8</td><td><input type="button" value="Delete Row" /></td></tr>
        <tr><td><input type="checkbox" /></td><td>value 9</td><td><input type="button" value="Delete Row" /></td></tr>
        <tr><td><input type="checkbox" /></td><td>value 10</td><td><input type="button" value="Delete Row" /></td></tr>
    </table>
    <input id="btn" type="button" value="Delete Rows" />
    <a href="#" onclick="removeElement('tbl', 'specificID')">Remove a specific row</a>
    </body>
    </html>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 1, 2011 2:17 AM

All replies

  • User1224194097 posted

    Specify a ID for the TableRow and add runat="server" and use that ID directly in code behind. No need to use FindControl.

    <table>
        <tr id="trHeader" runat="server">
            <td>
                Something here
            </td>
        </tr>
    </table>

    You can set Visible to false in page codebehind

    protected void Page_Load(object sender, EventArgs e)
    {
        trHeader.Visible = false;
    }

    You can also hide the table Row using Javascript as well

    <a href="#" onclick="document.getElementById('<%= trHeader.ClientID %>').style.display='none';">
        Hide Row</a>

     

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 28, 2011 11:32 PM
  • User348806598 posted

    Hi,

    See the below HTML-

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Untitled Page</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#tbl input[type=button]").click(function() {
                    if (confirm("Are you sure?"))
                        $(this).closest("tr").remove();
                })
                $("#btn").click(function() {
                    if (confirm("Are you sure?")) {
                        $("#tbl input[type=checkbox]:checked").closest("tr").remove();
                    }
                })
    
            });
            function removeElement(parentDiv, childDiv) {
                document.getElementById(childDiv).style.display = "none";
    //            if (childDiv == parentDiv) {
    //                alert("The parent div cannot be removed.");
    //            }
    //            else if (document.getElementById(childDiv)) {
    //                var child = document.getElementById(childDiv);
    //                var parent = document.getElementById(parentDiv);
    
    //                (parent.getElementsByTagName('tbody')[0]).removeChild(child);
    //            }
    //            else {
    //                alert("Child div has already been removed or does not exist.");
    //                return false;
    //            }
            } 
        </script>
    </head>
    <body>
    <table style="width: 100%;" id="tbl">
        <tr><td><input type="checkbox" /></td><td>value 1</td><td><input type="button" value="Delete Row" /></td></tr>
        <tr><td><input type="checkbox" /></td><td>value 2</td><td><input type="button" value="Delete Row" /></td></tr>
        <tr><td><input type="checkbox" /></td><td>value 3</td><td><input type="button" value="Delete Row" /></td></tr>
        <tr><td><input type="checkbox" /></td><td>value 4</td><td><input type="button" value="Delete Row" /></td></tr>
        <tr id="specificID"><td><input type="checkbox" /></td><td>value 5</td><td><input type="button" value="Delete Row" /></td></tr>
        <tr><td><input type="checkbox" /></td><td>value 6</td><td><input type="button" value="Delete Row" /></td></tr>
        <tr><td><input type="checkbox" /></td><td>value 7</td><td><input type="button" value="Delete Row" /></td></tr>
        <tr><td><input type="checkbox" /></td><td>value 8</td><td><input type="button" value="Delete Row" /></td></tr>
        <tr><td><input type="checkbox" /></td><td>value 9</td><td><input type="button" value="Delete Row" /></td></tr>
        <tr><td><input type="checkbox" /></td><td>value 10</td><td><input type="button" value="Delete Row" /></td></tr>
    </table>
    <input id="btn" type="button" value="Delete Rows" />
    <a href="#" onclick="removeElement('tbl', 'specificID')">Remove a specific row</a>
    </body>
    </html>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 1, 2011 2:17 AM