上取消選中複選框

注意隱藏的列：您指向基於相同的問題環節之前，我需要告訴我嘗試了所有的相關的解決方案在這裏並沒有什麼工作。我精確地註冊了這裏實際工作的解決方案。隱藏/顯示一列進行切換複選框

因此，我的代碼可以讓您動態創建表格並編輯表格內容。對於創建的每個新列，都會添加一個複選框，當未選中時隱藏創建的列。

這是我的代碼：

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript" src="https://code.jquery.com/jquery-1.4.4.min.js"></script> 
<script type="text/javascript"    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type='text/javascript'> 
function addrow() 
{  
first_row = $('#Row1'); 
first_row.clone().appendTo('random'); 
} 
function addcol() 
{ 
var myform = $('#myform'), 
iter = 1; 
myform.find('tr').each(function(){ 
      var trow = $(this); 
      if(trow.index() === 0){ 
       trow.append('<th contenteditable="true" class="COLUMN_'+iter+'"><b>COLUMN # '+iter+'</b></td>'); 
        var labelname = "Show COLUMN #" +iter; 
      var create = $('<input type="checkbox" name="COLUMN_'+iter+'"  checked="checked"><label>'+labelname+'</label><br>'); 
      $(".noprint").append(create); 
      }else{ 
       trow.append('<td class="COLUMN_'+iter+'" contenteditable="true"></td>'); 
      } 
     }); 
     iter += 1;  
} 
$(window).load(function(){ 
$("input:checkbox").click(function(){ 
    var column = "."+$(this).attr("name"); 
    $(column).toggle(); 
}); 
}); 
</script> 
<style> 
table { 
    font-family: arial, sans-serif; 
    border-collapse: collapse; 
} 
td, th { 
    border: 1px solid #dddddd; 
    text-align: left; 
    padding: 8px; 
} 
tr:nth-child(even) { 
    background-color: #dddddd; 
} 
</style> 
</head> 
<body> 
<input type="button" value="Add new row"  onclick="addrow()"/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<input type="button" value="Add new column"  onclick="addcol()"/> 
<br> 
<br> 
<span class="noprint"> </span> 
<form id="myform"> 
<table id="random" width="70%"> 
    <tr> 
    <th>Name 1</th> 
    <th>Name 2</th> 
    </tr> 
    <tr id="Row1"> 
    <td contenteditable="true">Entry 1</td> 
    <td contenteditable="true">Entry 2</td> 
    </tr> 
    <tr> 
    <td contenteditable="true">Entry 3</td> 
    <td contenteditable="true">Entry 4</td> 
    </tr> 
</table> 
</form> 
</body> 
</html>

我無法掩飾基礎上的複選框狀態列。有人能告訴我我做錯了什麼嗎？

來源

2017-10-14 Too Much Noise

CSS可以做到這一點：通過類或ID隱藏/顯示行或列，如果它是關於一個單行或行。使用checbox和radio進行演示，以顯示它可以創建https://codepen.io/gcyrillus/pen/HBjDn將選擇器添加到規則中，同時添加行 –

嘗試......

$(「#myform」).on(「click」,」input[type=‘checkbox’]」,function(){ 
    var column = "."+$(this).attr("name"); 
    $(column).toggle(); 
});

由於您的複選框元素加入後，你要聽父元素上的單擊事件，然後綁定到孩子。

來源

2017-10-14 19:26:57 TheValyreanGroup

隱藏/顯示一列進行切換複選框

上取消選中複選框

回答

相關問題