0

我编写了一个代码，通过单击按钮动态添加新行。有 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上。

4

2 回答 2

1

看看这个工作小提琴。

您当前拥有它的方式，每次调用 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" />
于 2013-09-26T13:50:07.120 回答
1

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

更新

 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);

像这样，这只是一个例子。这是我的克隆工作代码片段之一。

于 2013-09-26T13:26:19.673 回答