javascript - 更改innerhtml输入框的值

我必须在html表中添加新行，其中它会从第一行生成文本框作为内部html，并显示第一行的文本。

在图片中，当我按添加语言按钮时，您会看到最后一行与第一行相同。但我希望新行应为空白。

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

                            // limit the user from creating fields more than your limits
        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;


        }

我放了$('.small').val('Some text');，但是它的文本框消失了。

请注意，页面上有多个表，并且我们使用相同的函数来生成行。

最佳答案

您需要清理文本框以使它们为空。您已经用jQuery标签标记了它，所以这是我对您的问题的解决方案。

function addNewRow(ID) {
  var table = $("#" + ID);
  var cloneRow = $("tr:eq(1)", table).clone();

  //Clean out all textboxes
  $("td input:text", cloneRow).removeAttr('value')

  $("tbody", table).prepend(cloneRow)
}

$('button').click(function() {
  addNewRow("test")
})

table {
  width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid #cdcdcd;
}

table th,
table td {
  padding: 10px;
  text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="test">
  <thead>
    <tr>
      <th>Select</th>
      <th>Value 1</th>
      <th>Value 2</th>
      <th>Value 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" name="record">
      </td>
      <td>
        <input type="text" name="record" value="Value 1">
      </td>
      <td>
        <input type="text" name="record" value="Value 2">
      </td>
      <td>
        <input type="text" name="record" value="Value 3">
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="record">
      </td>
      <td>
        <input type="text" name="record" value="Value 1">
      </td>
      <td>
        <input type="text" name="record" value="Value 2">
      </td>
      <td>
        <input type="text" name="record" value="Value 3">
      </td>
    </tr>
  </tbody>
</table>

<button type="button">Add row!</button>

关于javascript - 更改innerhtml输入框的值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45999620/