Как я могу сделать «tr» таблицы видимой с помощью JavaScript для события флажка?

У меня есть флажок, когда пользователь установил флажок. Мне нужно сделать это tr видимым «истинным» на странице. Если снова снять флажок, сделайте tr «невидимым» с помощью JavaScript или jQuery.Как я могу сделать «tr» таблицы видимой с помощью JavaScript для события флажка?

Первоначально во время загрузки страницы я переплетены значения для выпадающего

<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 ответов в 3-х вкусов. Джоэл: не-jquery. o.k.w: смесь. cletus's: Чистый JQuery. Хороший ассортимент! –

Строка:

<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-free. Мой нет. FYI –

Еще одна вещь, по умолчанию показана его строка и установлен флажок. Шахта отменена :) –

Я изменил свой (см. Вер. 1 и вер. 2 комментарий в сценарии). Чтобы преодолеть потенциальные конфликты, возвращаемые обратно. Таким образом, видимость TR полностью зависит от исходного состояния checkbox. –

Это должно помочь вам:

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

$(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! –

<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

Как я могу сделать «tr» таблицы видимой с помощью JavaScript для события флажка?

ответ

Смежные вопросы