Clever Geek Handbook

How can I make the "tr" of a table visible using JavaScript for a checkbox event?

I have a checkbox when the user checked the checkbox. I need to make it tr

visible "true" on the page. If unchecked again, make it tr

"invisible" with JavaScript or jQuery.

Initially, during page load, I bind the values ​​for the dropdown

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

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

</tr>

I am currently using a server side event for this checkbox which takes a long time to complete.

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


source to share


4 answers


Line:

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

Checkbox:



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

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


source


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


source 


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

from

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


source 


<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<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>
+1


source






More articles:


All Articles