Question

我有一张只包含一行的表格。 Row有很多元素，比如文本框和按钮。单击该按钮时，将使用append()函数克隆表行。我的问题是，当我单击按钮时，我想增加文本框和按钮ID。我怎么能这样做？

示例HTML：

<tr id="items:1">
    <td id="id">
        <input type="text" id="price:1" name="price" value="" size="6" readonly="readonly" />
    </td>
    <td id="id">
        <input type="text" id="quantity:1" name="quantity" size="10" align="middle" onblur="totalprice(this)" />
    </td>
    <td id="id">
        <input type="text" id="total:1" name="total" size="10" value="0" readonly="readonly" align="middle" />
    </td>
    <td id="id">
        <input type="button" onclick="cloneRow()" id="button:1" value="ADD" />
    </td>
</tr>

示例JavaScript：

function cloneRow() {
    var row = document.getElementById("items:1");
    var table = document.getElementById("particulars");
    var clone = row.cloneNode(true);
    var rowId = "items:" + a.toString();
    clone.id = rowId;
    var tabledataid = document.getElementById("id");
    var inputtext = tabledataid.getElementsByTagName("input");
    var inputtextid = inputtext[a];
    var changeInputTextid = "price:" + b.toString();
    inputtextid.id = changeInputTextid;
    alert(changeInputTextid);
    table.appendChild(clone);
    a++;
}

Answer 1

A fiddle

创建一个添加行的函数，只需正确使用文本框和列的索引

function insertRow() {
var x = document.getElementById('ttable');
var new_row = x.rows[0].cloneNode(true);
var len = x.rows.length;
new_row.cells[0].innerHTML = len;

var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
inp1.id += len;
inp1.value = '';
x.appendChild(new_row);
}

使用Javascript克隆表行时，增加输入文本ID

1 个答案: