Remove From My Forums

hide a table row

Question
0

Sign in to vote

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