How can I make a “tr” of a table visible using JavaScript for a checkbox event?

Question!

I have a checkbox when user checked that check box means. I need to make this tr visible "true" on the page. If again unchecked make tr "invisible" using JavaScript or jQuery.

Initially during the page load I have binded the values for the drop down

<tr id ="trddl"  runat= "server" visiable="false">

-- here I have a dropdown control where values are coming from DB --

</tr>

Right now I am doing using server side event for the check box, which takes a lot of time.

if(chkbox.checked=true)
{
trddl.visiable= true
}


Answers
The row:

<tr id="tr99"><td>......</td></tr>

The checkbox:

<input type="checkbox" onclick="toggletr(this);" value="val" id="cbox" />

The javascript:

<script type="text/javascript>

$(document).ready(function() {
  //$(#tr99).hide(); //ver 1
  toggletr($(#cbox)); //ver 2
});

function toggletr(obj){
if(obj.checked)
  $(#tr99).hide();
else
  $(#tr99).show();
}
</script>
By : o.k.w


This should help you:

<html>
<head>
<script language="javascript">
function Toggle(sender)
{
    document.getElementById('theRow').style.display = sender.checked?"block":"none";
}
</script>
</head>
<body>
<input type="checkbox" checked="checked" onclick="Toggle(this)" /> Show Row

<table>
    <tr id="theRow"><td>Test Row</td></tr>
</table>
</body>
</html>


with

$(function() {
  var cb1 = $("#cb1");
  cb1.change(toggle_cb1);

  // this sets 'this' to the checkbox
  // note: this is only required if you don't hide or show the row
  // correctly on the serverside based on the checkbox state
  toggle_cb1.call(cb1[0]);
});

function toggle_cb1() {
  if ($(this).is(":checked")) {
    $(this).show();
  } else {
    $(this).hide();
  }
}
By : cletus


This video can help you solving your question :)
By: admin