javascript - 使用javascript中的按钮单击添加多个文本框

Question

您好，我想在单击按钮时添加多个文本框。我写了以下 HTML 代码。

<script type="text/javascript">
 function addRow(btn) {         
     var parentRow = btn.parentNode.parentNode;
     var table = parentRow.parentNode;
     var rowCount = table.rows.length;
     var row = table.insertRow(rowCount);
     var cell1 = row.insertCell(0);
     var element1 = document.createElement("input");
     element1.type = "text";
     cell1.appendChild(element1);
     var cell3 = row.insertCell(1);
 }
</script>
<table>
   <tr>
      <td><input type="text" name="data1" value="abc" /></td>
      <td><button type="button" onClick ="addRow(this)">Add</button></td>
   </tr>
</table>

我不知道该怎么做。请告诉我如何做这些东西....提前谢谢你

Answer 1

将您的 JavaScript 代码包装在 header 部分。

DEMO of your code

与 jQuery 相同的代码

DEMO

var txtbox = '<td><input type="text"/></td>';

function addRow(btn) {
    $(btn).closest('tr').append(txtbox);
}

DEMO

var txtbox = '<tr><td><input type="text"/></td></td>';

function addRow(btn) {
    $(btn).closest('table').append(txtbox);
}

引用资料

.closest()

.append()

添加下拉列表

你只需要在var txtbox中添加下拉列表代码即可

DEMO

var txtbox = '<tr><td><select><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option></select></td></td>';

function addRow(btn) {
    $(btn).closest('table').append(txtbox);
}