向表中添加行

Question

我编写了一个代码，可以通过单击按钮动态添加新行。 共有5列。

第三列包含两个单选按钮 ，单击每个单选按钮时，将显示新选项。 这个第一行工作正常，但是一旦我点击按钮生成新的行问题就开始了。

当我单击第二行的单选按钮时，选项显示在第一行。 相反，我希望它们出现在该特定列中。

这是我添加行的代码

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length; 

    for(var i=0; i<colCount; i++) {
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[1].cells[i].innerHTML;
    } 
}

这是我的桌子

<TABLE id="dataTable"  border="1">
    <td><input type="text" id=1 /></td>
    <td><input type="text" id=2 /></td>

    <td>
        <input type="radio" name="radio1" value="1" onClick="toggleDisplay('mydiv','mydiv1');">Own
        <input type="radio" name="radio2" value="1" onClick="toggleDisplay1('mydiv','mydiv1');">Contractor

        <div id="mydiv" style="display:none;">
            <input type="radio" name="Wage" value="Wage">Wage Board
            <input type="radio" name="Staff" value="Staff">Staff
        </div>

        <div id="mydiv1" style="display:none;">
            Name Of Contractor:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name = "text" >
            <input type="radio" name="No" >No of Workmen
        </div>
    </td>

    <td><input type="text"  id=5  /></td>
    <td><input type="text"  id=4  /></td>

    </tr>
</TABLE>

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

请尽快帮我解决这个问题。 我认为问题在于独特的ID。

Answer 1

您必须为新生成的元素提供动态ID，以便对它们执行操作。 此外，您还可以使用cloneNode（）在纯JavaScript中克隆元素。

UPDATE

 var tr3=document.getElementById(tableid).getElementsByTagName('tr')[1].cloneNode(true);
 tr3.setAttribute("id","tempCommentId");
 tr3.getElementsByTagName('td')[1].innerHTML=Comment;

 document.getElementById(tableid).appendChild(tr3);

像这样，这仅仅是例如。 这是我使用克隆工作的代码片段之一。

Answer 2

看看这个工作小提琴 。

你现在拥有它的方式，每次调用toggleDisplay或toggleDisplay1时 - 它都会发送相同的'mydiv'和'mydiv1'参数。 它应该做的是它必须在同一行内找到选项。

toggleDisplay = function() {
    var target = event.target || event.srcElement;
    $(target).closest("td").find("div").hide();
    $(target).closest("td").find("div:eq("+$(target).index("input[name="+$(target).attr("name")+"]")+")").toggle();
};

要添加新行，您可以克隆第一行：

addRow = function(tableID) {
    var table = document.getElementById(tableID);
    var oClone = table.rows[0].cloneNode(true);
    $(oClone).find("input[type=radio]").each(function(){
        $(this).attr("name", "radio"+table.rows.length);
    });
    $(oClone).find("div").hide();
    table.insertBefore(oClone);
};

您的单选按钮也有不同的名称，因此它们的行为不正常：

<TABLE id="dataTable"  border="1">
    <tr>
    <td><input type="text" /></td>
    <td><input type="text" /></td>

    <td>
        <input type="radio" name="radio0" onClick="toggleDisplay();"/>Own
            <input type="radio" name="radio0"  onClick="toggleDisplay();"/>Contractor

        <div style="display:none;">
            <input type="radio" name="Wage" value="Wage"/>Wage Board
            <input type="radio" name="Staff" value="Staff"/>Staff
        </div>

        <div style="display:none;">
            Name Of Contractor:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name = "text" />
            <input type="radio" name="No" />No of Workmen
        </div>
    </td>

    <td><input type="text" /></td>
    <td><input type="text" /></td>

    </tr>
</TABLE>
<input type=button onclick="addRow('dataTable')" value="add row" />