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 --
</tr>
Right now I am doing u开发者_如何学Gosing server side event for the check box, which takes a lot of time.
if(chkbox.checked=true)
{
trddl.visiable= true
}
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>
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>
<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();
}
}
<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>
加载中,请稍侯......
精彩评论