下面是我的代码。在该代码中,当我在 txtbox 中输入 3 并单击复制时,将生成 3 次相同的表。如果我在 txtbox 1 和 2 中输入名称和 ID 并单击获取数据,那么它将被设置为 txtbox 3 和 4。它仅适用于第一个表。问题是它不适用于动态表。帮帮我!!代码如下,
function copytbl() {
var i, j;
j = document.getElementById("txtbox").value;
for (i = 0; i < j - 1; i++) {
var row = document.getElementById("tblbdy"); // find row to copy
var table = document.getElementById("tbl"); // find table to append to
var clone = row.cloneNode(true); // copy children too
clone.id = "newID"; // change id or other attributes/contents
table.appendChild(clone); // add new row to end of table
}
}
function getdata() {
document.getElementById("txtbox3").value = document.getElementById("txtbox1").value;
document.getElementById("txtbox4").value = document.getElementById("txtbox2").value;
}
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
table,
td {
border: 1px solid black;
border-collapse: collapse;
height: 90px;
text-align: left;
}
tr.noBorder td {
border-right-style: hidden;
border-left-style: hidden;
}
<input type="text" id="txtbox" name="textbox" onkeypress="return isNumber(event)" />
<input type="reset" value="Reset">
<button type="button" onclick="copytbl()">COPY</button><br>
<br>
<table id="tbl" style="width:100%">
<tbody id="tblbdy">
<tr>
<td colspan="5">Header</td>
</tr>
<tr>
<td>Name</td>
<td colspan="3">Age</td>
<td>Sex</td>
</tr>
<tr>
<td rowspan="3">
Name:<br>
<input type="text" id="txtbox1" name="textbox" /><br> Id:
<br>
<input type="text" id="txtbox2" name="textbox" onkeypress="return isNumber(event)" /><br>
<input type="reset" value="Reset">
</td>
<td></td>
<td></td>
<td></td>
<td rowspan="3">
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<br>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="4"></td>
</tr>
<tr>
<td colspan="5">Footer</td>
</tr>
<tr class="noBorder">
<td>
<br>
<button type="button" onclick="getdata()">GET DATA</button><br><br> Name:
<br>
<input type="text" id="txtbox3" name="textbox" /><br> Id:
<br>
<input type="text" id="txtbox4" name="textbox" /><br>
</td>
</tr>
</table>
提前致谢
您需要将id
正在使用的更改为classes
。然后将tbody
你生成的新id解析到getdata
Function中
演示https://jsfiddle.net/kplcode/bt5da5go/2/
function copytbl() {
var i, j;
j = document.getElementById("txtbox").value;
for (i = 0; i < j - 1; i++) {
var newId = "newID-"+(document.querySelectorAll('.tblbdy-ele').length+i);
var row = document.getElementById("tblbdy"); // find row to copy
var table = document.getElementById("tbl"); // find table to append to
var clone = row.cloneNode(true); // copy children too
clone.id = newId; // change id or other attributes/contents
table.appendChild(clone); // add new row to end of table
var getDataBtn = document.getElementById(newId).getElementsByClassName("getDataBtn")[0]
getDataBtn.onclick = function() {
getdata(newId);
};
}
}
function getdata(id) {
var table = document.getElementById(id);
document.getElementById(id).getElementsByClassName("txtbox3")[0].value = document.getElementById(id).getElementsByClassName("txtbox1")[0].value;
document.getElementById(id).getElementsByClassName("txtbox4")[0].value = document.getElementById(id).getElementsByClassName("txtbox2")[0].value;
}
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句