ansaurus

Question

how to make " tr" of a table visible using javascript for a checkbox event

Answer 1

+4 A:

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>

Joel Coehoorn 2009-10-17 03:57:54

You should not give a `<tr>` `block` display properties. It's a table row, not a block level element. IE will forgive you for this, but other browsers will obey and totally screw up the columns in that row. The standards compliant setting is `display="table-row"`, but this fails in IE. So the best approach is just `display=""`.

Crescent Fresh 2009-10-17 17:28:01

Answer 2

+3 A:

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>

o.k.w 2009-10-17 04:03:19

@prince23: Joel's method is jquery-free. Mine isn't. FYI

o.k.w 2009-10-17 04:05:46

One more thing, by default, his row is shown and checkbox is checked. Mine is reversed :)

o.k.w 2009-10-17 04:06:53

I've tweaked mine (see ver 1 and ver 2 comment in the script). To overcome potential postback values conflict. So the TR's visibility is totally dependent on checkbox's initial checked status.

o.k.w 2009-10-17 04:24:55

Answer 3

+2 A:

<input type="checkbox" name="cb1" id="cb1">
<table>
<tr id="row1">
  <td>...</td>
</tr>
</table>

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();
  }
}

cletus 2009-10-17 04:35:21

@cletus: Pure jquery!

o.k.w 2009-10-17 04:44:10

Answer 4

+1 A:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
$(function(){
    //We attach an "onclick" event handler to our 1st checkbox here, as apposed to html code below for the input checkbox
    //This is the practice of separating display vs function
    $("#chkToggle1").click(function(){
     //Call our toggleVisibility JS function, passing in a jQuery object for the row we want to hide, and a boolean indicating if our checkbox is checked or not
     toggleVisibility($("#trTarget1"), $(this).is(":checked"));
    });

    //Again for our 2nd checkbox
    $("#chkToggle2").click(function(){
     //Call our toggleVisibility JS function, passing in a jQuery object for the row we want to hide, and a boolean indicating if our checkbox is checked or not
     toggleVisibility($("#trTarget2"), $(this).is(":checked"));
    });

    //Again for our 3rd checkbox
    $("#chkToggle3").click(function(){
     //Call our toggleVisibility JS function, passing in a jQuery object for the row we want to hide, and a boolean indicating if our checkbox is checked or not
     toggleVisibility($("#trTarget3"), $(this).is(":checked"));
    }); 
});

//I created a generic function that can reused for toggle visibility of other objects, not locked down to just our table row
//You'll note the first parameted has a "$" before it. This is to denote that the function is expecting a jQuery object and not a normal DOM object
function toggleVisibility($targetObj, isVisible){
    if(isVisible == true)
     $targetObj.show();
    else
     $targetObj.hide();
}
</script>
<head>
<body>
    <input type="checkbox" id="chkToggle1" checked="checked" />
    <input type="checkbox" id="chkToggle2" checked="checked" />
    <input type="checkbox" id="chkToggle3" checked="checked" />
    <table style="border: 1px solid black;">
     <tr id="trTarget1">
      <td>Table Row 1</td>
     </tr>
     <tr id="trTarget2">
      <td>Table Row 2</td>
     </tr>
     <tr id="trTarget3">
      <td>Table Row 3</td>
     </tr>  
    <table>
</body>
</html>

WesleyJohnson 2009-10-17 04:59:30

ansaurus

tags:

views:

answers:

how to make " tr" of a table visible using javascript for a checkbox event

related questions