Question

我要在表格中输入一个新行，我遇到的问题是我希望新行像第一行一样，文本框不仅仅是单词..

function displayResult() {
  var table=document.getElementById("customers");
  var row=table.insertRow(0);
  var item=row.insertCell(0);
  var link=row.insertCell(1);
  var price=row.insertCell(2);
  var comment=row.insertCell(3);
  item.innerHTML="words";
  link.innerHTML="words";
  price.innerHTML="words";
  comment.innerHTML="words";
}

我希望新行模仿的原始行。

</tr>
<td>
  <input type ="text" name= "item" placeholder= "Item Description" />
</td>

以下是调用函数

的按钮代码

<br>
<button type="button" onclick="displayResult()">Insert New Item</button>

Answer 1

Live demo here (click).

您正在寻找的只是cloneNode()，或者您可以再次创建每个元素，附加它们并插入行，但这不是那么干净。您的代码存在一些问题：请勿使用<br>。这已经很久了。您应该为此目的使用css margin / padding / position。不要在html中使用onclick或任何内联js。这从来都不是一个好习惯。相反，获取对元素的引用并使用javascript添加事件侦听器。此外，您的行/单元格HTML无效。你在单元格之前关闭了你的行......

<table>
  <tbody>
    <tr id="myRow"> <!-- you can use this id to find the row with javascript -->
      <td>
        <input type="text" name="item" placeholder="Item Description">
      </td>
    </tr>
  </tbody>
</table>
<button id="myButton" type="button">Insert New Item</button> <!-- you can use this id to find the button with javascript -->

JS：

var myButton = document.getElementById('myButton'); //get button with id "myButton"
var myRow = document.getElementById('myRow'); //get row with id "myRow"

myButton.addEventListener('click', function() { //add click function to "myButton"
  var newRow = myRow.cloneNode(); //clone the row
  myRow.parentNode.insertBefore(newRow, myRow.nextSibling); //add newRow after "myRow"
});

将新行插入表格时的文本框

1 个答案: