如何使用JavaScript爲複選框事件創建表格的「tr」？

當用戶選中複選框表示時，我有一個複選框。我需要使此tr在頁面上顯示爲「true」。如果再次取消選中，使用JavaScript或jQuery使tr「隱形」。如何使用JavaScript爲複選框事件創建表格的「tr」？

最初的頁面加載過程中我已經綁定了降下來的值

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

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

</tr>

現在我正在使用服務器端事件的複選框，這需要大量的時間做的事情。

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

來源

2009-10-17 happysmile

第3分的答案。喬爾的：非jQuery。 o.k.w's：混合物。 cletus's：純粹的JQuery。好的分類！ – 2009-10-17 04:46:16

行：

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

複選框：

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

來源

2009-10-17 04:03:19

@ prince23：喬爾的方法是jQuery免費的。我的不是。供參考 – 2009-10-17 04:05:46

還有一件事，默認情況下，他的行顯示和複選框被選中。礦是逆轉:) – 2009-10-17 04:06:53

我已經調整了我的（見腳本中的版本1和版本2的評論）。克服潛在的回傳值衝突。因此，TR的可見性完全取決於複選框的初始檢查狀態。 – 2009-10-17 04:24:55

這會幫助你：

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

來源

2009-10-17 03:57:54

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

在3種口味

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

來源

2009-10-17 04:35:21 cletus

@cletus：純粹的jquery！ – 2009-10-17 04:44:10

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

來源

2009-10-17 04:59:30 WesleyJohnson

如何使用JavaScript爲複選框事件創建表格的「tr」？

回答

相關問題