Javascript 在切换复选框时隐藏/显示列 取消选中复选框时隐藏列
注意：在您指向基于同一问题的链接之前，我需要告诉您，我在这里尝试了所有相关的解决方案，但没有任何效果。我之所以注册，正是因为这里的解决方案都不起作用。 因此，我的代码允许您动态创建表并编辑表内容。对于创建的每个新列，还将添加一个复选框，如果未选中该复选框，将隐藏创建的列 这是我的代码：Javascript 在切换复选框时隐藏/显示列 取消选中复选框时隐藏列,javascript,jquery,html,css,Javascript,Jquery,Html,Css,注意：在您指向基于同一问题的链接之前，我需要告诉您，我在这里尝试了所有相关的解决方案，但没有任何效果。我之所以注册，正是因为这里的解决方案都不起作用。 因此，我的代码允许您动态创建表并编辑表内容。对于创建的每个新列，还将添加一个复选框，如果未选中该复选框，将隐藏创建的列 这是我的代码： <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http
<!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()"/>             <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>
函数addrow（）
{
第一行=$（“#第1行”）；
第一行.clone（）.appendTo（'random'）；
}
函数addcol（）
{
var myform=$（“#myform”），
iter=1；
myform.find（'tr'）。每个（函数（）{
var trow=$（本）；
if（trow.index（）==0）{
trow.append（'COLUMN#'+iter+''）；
var labelname=“显示列#”+iter；
var create=$（''+labelname+'
'）；
$（“.noprint”）.append（创建）；
}否则{
trow.append（“”）；
}
});
iter+=1；
}
$（窗口）。加载（函数（）{
$（“输入：复选框”）。单击（函数（）{
var column=“.”+$（this.attr（“name”）；
$（列）.toggle（）；
});
});
桌子{
字体系列：arial，无衬线；
边界塌陷：塌陷；
}
td，th{
边框：1px实心#dddddd；
文本对齐：左对齐；
填充：8px；
}
tr:n个孩子（偶数）{
背景色：#dddddd；
}
名字1
名称2
条目1
条目2
条目3
条目4
$(“#myform”).on(“click”,”input[type=‘checkbox’]”,function(){
var column = "."+$(this).attr("name");
$(column).toggle();
});
$(“#myform”).on(“click”,”input[type=‘checkbox’]”,function(){
var column = "."+$(this).attr("name");
$(column).toggle();
});
由于稍后添加了复选框元素，因此需要侦听父元素上的单击事件，然后绑定到子元素。CSS可以这样做：通过类或id隐藏/显示行或列（如果是关于单个列或行）。使用checbox和radio进行演示，以显示可以将选择器添加到规则中，同时添加rowCSS可以做到这一点：通过类或id隐藏/显示行或列（如果是关于单个列或行）。使用checbox和radio进行演示，显示可以在添加行时将选择器包括到规则中