动态添加和删除表格行

Question

我希望有人能帮助我。

我根据一些示例修改了一些代码，如下所示，允许用户添加和删除表格行。

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”中有数据，则会创建一个新的排列在下方。我已经尝试了很长时间，但似乎找不到实现此目标的方法。希望有人能够给予帮助并指出我的问题所在。非常感谢。

- IRHM

---

总是在Stack Overflow上搜索，那里有很多解决方案... 当我搜索“Add Delete Table Row [html]”时，我得到了这个... http://stackoverflow.com/search?q=Add+Delete+Table+Row+[html]&submit=search... 检查一下这个链接... - Fahim Parkar

嗨，是的，你说得对，这也是我在发问之前做的第一件事情，但不幸的是，我没能找到可以帮助我解决特定问题的答案。此致敬礼 - IRHM

使用已有的逻辑...你的代码中哪些部分没有起作用呢？请解释一下。 - Fahim Parkar

嗨，我对jQuery并不是特别熟悉，但我可以去了解一下。非常感谢。 - IRHM

@FahimParkar，非常感谢您帮助我解决这个问题。我找不到的是一个没有“添加”按钮来插入新行的示例，而是使用上面行的完成来“添加”新行。 - IRHM

Answer 1

我在解决类似问题时发现了你的问题。我使用了你的案例（因为它比我的简单）来排除问题……我认为与你分享结果是公平的。

以下代码每次检查每行中两个受监视输入之一失去焦点的情况 - 如果该行的两个受监视输入都有值（并且该行尚未导致生成其他行），则会在下方添加新行。

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>

- JRulle