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


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 --


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

trddl.visiable= true

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){
By : o.k.w

This should help you:

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

    <tr id="theRow"><td>Test Row</td></tr>


$(function() {
  var cb1 = $("#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[0]);

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

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