以下是我的源代码
我需要使用 JavaScript 中的复选框动态添加表格列，如果取消选中该复选框，则需要禁用表格中的特定列，如果我再次单击同一复选框，该列应出现在同一位置，因此请帮助我来纠正这个问题......
<!DOCTYPE html>
<html>
<head>
<title>1.Table</title>
<style>
#Whole-Wrapper
{
background:gray;
height:700px;
}
h1{text-align:center;}
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
td{padding:10px;}
#Wrapper
{
width:90%;
margin:10% auto;
border:1px solid black;
}
#div1
{
float:left;
width:50%;
background:lightblue;
}
#div2
{
float:left;
width:50%;
background:lightyellow;
height:256px;
}
#ClearFix
{
clear:both;
}
</style>
</head>
<body>
<div id="Whole-Wrapper">
<h1>Create Table Using Checkbox</h1>
<div id="Wrapper">
<div id="div1">
<h2>First Column</h2>
<input type="checkbox" id="chk1" onclick="myFunction(1)"><label>First Checkbox</label><br><br>
<input type="checkbox" id="chk2" onclick="myFunction(2)"><label>Second Checkbox</label><br><br>
<input type="checkbox" id="chk3" onclick="myFunction(3)"><label>Third Checkbox</label><br><br>
<input type="checkbox" id="chk4" onclick="myFunction(4)"><label>Fourth Checkbox</label><br><br>
<input type="checkbox" id="chk5" onclick="myFunction(5)"><label>Fifth Checkbox</label><br><br>
</div>
<div id="div2">
<h2>Second Column</h2>
<table id="mtTbl">
<tr id="Head"></tr>
<tr id="Tr1"></tr>
<tr id="Tr2"></tr>
<tr id="Tr3"></tr>
</table>
</div>
<div id="ClearFix"></div>
</div>
</div>
<script>
function myFunction(cellNo)
{
var a = document.getElementById("chk"+cellNo);
if(a.checked)
{
var x = document.createElement("TH");
var y = document.createTextNode("Table Header"+cellNo);
x.appendChild(y);
document.getElementById("Head").appendChild(x);
var x1 = document.createElement("TD");
var y1 = document.createTextNode("Row"+cellNo);
x1.appendChild(y1);
document.getElementById("Tr1").appendChild(x1);
var x2 = document.createElement("TD");
var y2 = document.createTextNode("Row"+cellNo);
x2.appendChild(y2);
document.getElementById("Tr2").appendChild(x2);
var x3 = document.createElement("TD");
var y3 = document.createTextNode("Row"+cellNo);
x3.appendChild(y3);
document.getElementById("Tr3").appendChild(x3);
}
else
{
var delHead = document.getElementById("Head");
delHead.deleteCell(cellNo-1);
var col1 = document.getElementById("Tr1");
col1.deleteCell(cellNo-1);
var col2 = document.getElementById("Tr2");
col2.deleteCell(cellNo-1);
var col3 = document.getElementById("Tr3");
col3.deleteCell(cellNo-1);
/*var delHead = document.getElementById("Head");
delHead.deleteCell(cellNo-cellNo);
var col1 = document.getElementById("Tr1");
col1.deleteCell(cellNo-cellNo);
var col2 = document.getElementById("Tr2");
col2.deleteCell(cellNo-cellNo);
var col3 = document.getElementById("Tr3");
col3.deleteCell(cellNo-cellNo);
var col4 = document.getElementById("Tr4");
col4.deleteCell(cellNo-cellNo)
var b = document.getElementById("Head");
b.style.display = "chk"+cellNo.checked ? "block" : "none";
var c = document.getElementById("Tr1");
c.style.display = "chk"+cellNo.checked ? "block" : "none";
var d = document.getElementById("Tr2");
d.style.display = "chk"+cellNo.checked ? "block" : "none";
var e = document.getElementById("Tr3");
e.style.display = "chk"+cellNo.checked ? "block" : "none";*/
}
}
</script>
</body>
</html>
最佳答案
我已经用 JavaScript 示例为您创建了一个 codepen。
http://codepen.io/anon/pen/EyQZyw
脚本刚刚更改如下。
function myFunction(cellNo)
{
var a = document.getElementById("chk"+cellNo);
if(a.checked)
{
var x = document.createElement("TH");
var y = document.createTextNode("Table Header"+cellNo);
x.appendChild(y);
x.id = "th"+cellNo; document.getElementById("Head").appendChild(x);
var x1 = document.createElement("TD");
var y1 = document.createTextNode("Row"+cellNo);
x1.appendChild(y1);
x1.id = "Tr1td"+cellNo; document.getElementById("Tr1").appendChild(x1);
var x2 = document.createElement("TD");
var y2 = document.createTextNode("Row"+cellNo);
x2.appendChild(y2);
x2.id = "Tr2td"+cellNo; document.getElementById("Tr2").appendChild(x2);
var x3 = document.createElement("TD");
var y3 = document.createTextNode("Row"+cellNo);
x3.appendChild(y3);
x3.id = "Tr3td"+cellNo; document.getElementById("Tr3").appendChild(x3);
}
else
{
document.getElementById("th"+cellNo).remove();
document.getElementById("Tr1td"+cellNo).remove();
document.getElementById("Tr2td"+cellNo).remove();
document.getElementById("Tr3td"+cellNo).remove();
}
}
关于javascript - 使用javascript中的复选框动态添加表列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38455860/