[英]Dynamically Add & Delete Table Row
我想知道是否有人可以帮助我。
使用一些示例,我发现我修改了一些代码,如下所示,允许用户添加和删除表行。
Javascript代码
function addRow(addimagetable) {
var table = document.getElementById(addimagetable);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "radio";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "file";
cell3.appendChild(element3);
}
function deleteRow(addimagetable) {
try {
var table = document.getElementById(addimagetable);
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
var row = table.rows[i];
var radio = row.cells[0].childNodes[0];
if (null != radio && true == radio.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch (e) {
alert(e);
}
}
HTML表格
<div>
<input type="button" value="Add Row" onclick="addRow('addimagetable')" /> <input type="button" value="Delete Row"
onclick="deleteRow('addimagetable')" />
<table id="addimagetable" width="407" border="1">
<tr>
<td width="20"><input type="radio" name="radio" /></td>
<td width="147"><input type="text" name="title" /></td>
<td width="218"><input type="file" name="image" /></td>
</tr>
</table>
</div>
从上面的表格代码中可以看出,通过“单击”按钮添加或删除行。 我一直在努力解决的是如何摆脱“添加”按钮,而是用一个函数替换它,如果一行在单元格“2”和“3”中有数据,则会在下面创建一个新行。
我已经为此工作了一段时间,但我似乎无法找到一种方法来让它发挥作用。
我只是想知道是否有人可以向我伸出援助之手,告诉我哪里出错了。
非常感谢
我在尝试解决类似问题时发现了您的问题。 我使用你的案例(因为它比我的简单)来解决问题......我认为与你分享结果是公平的。
每当您在每行中的两个受监控输入之一失去焦点时,以下代码都会进行检查 - 如果该行的两个受监控输入都有值(并且该行尚未导致生成额外的行),则在下方添加一个新行。
HTML:
<input type="button" value="Add Row" onclick="addRow('addimagetable')" />
<input type="button" value="Delete Row" onclick="deleteRow('addimagetable')" />
<table id="addimagetable" width="407" border="1">
<tr>
<td width="20"><input type="radio" name="radio"/></td>
<td width="147"><input type="text" name="title" onblur="check(1)" /></td>
<td width="218"><input type="file" name="image" onblur="check(1)" /></td>
</tr>
</table>
脚本:
<script>
var numrows = 1; // because you are starting with 1 row visible
var rowsarray = ["0", "0"];
function addRow(addimagetable) {
numrows = numrows + 1;
rowsarray[numrows] = "0";
var table = document.getElementById(addimagetable);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "radio";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell2.appendChild(element2);
element2 = cell2.getElementsByTagName("input")[0];
element2.setAttribute("onblur","check("+numrows+")");
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "file";
cell3.appendChild(element3);
element3 = cell3.getElementsByTagName("input")[0];
element3.setAttribute("onblur","check("+numrows+")");
}
function deleteRow(addimagetable) {
try {
var table = document.getElementById(addimagetable);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var radio = row.cells[0].childNodes[0];
if(null != radio && true == radio.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
function check(num) {
table = document.getElementById('addimagetable');
row = table.getElementsByTagName("tr")[num-1];
c1 = row.getElementsByTagName("td")[1].getElementsByTagName('input')[0].value;
c2 = row.getElementsByTagName("td")[2].getElementsByTagName('input')[0].value;
if ((c1 !== "") && (c1 !== null ) && (c2 !== "") && (c2 !== null) && (rowsarray[num] !== 1)) { addRow('addimagetable'); rowsarray[num] = 1; }
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.