使用Add_row boutton重置第一行

Question

使用添加按钮，输入将自动添加到下一行...如果我想在输入值添加下面的行后重置第一行。我该怎么办？如果我在输入框中输入“a”，当我点击添加行按钮时，它将被追加，但不会重置第一行

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;
    //alert(newcell.childNodes);
    switch (newcell.childNodes[0].type) {
      case "text":
        newcell.childNodes[0].value = table.rows[1].cells[1].querySelector("input").value;
        break;
      case "checkbox":
        newcell.childNodes[0].checked = false;
        break;
      case "select-one":
        newcell.childNodes[0].selectedIndex = 0;
        break;
    }
  }
  //clearForm();
}

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

    for (var i = 0; i < rowCount; i++) {
      var row = table.rows[i];
      var chkbox = row.cells[0].childNodes[0];
      if (null != chkbox && true == chkbox.checked) {
        if (rowCount <= 1) {
          alert("Cannot delete all the rows.");
          break;
        }
        table.deleteRow(i);
        rowCount--;
        i--;
      }
    }
  } catch (e) {
    alert(e);
  }
}

<form action="#" method="post">
  <input type="button" value="Add Row" onclick="addRow('dataTable')" />
  <input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
  <table id="dataTable" width="550px" border="1">
    <tbody>
      <thead>
        <tr>
          <th>Select </th>
          <th>Name</th>
        </tr>
      </thead>
      <tr>
        <td><input type="checkbox" name="chk" /></td>
        <td><input type="text" name="name"></td>
      </tr>
    </tbody>
  </table>
</form>

Answer 1

我不确定你问的是什么。我玩你的片段似乎没有清除第一行的输入？我也不确定你要完成什么，也许更多的背景会很好。每次重新绘制表是一个便宜的操作，直到您开始获取大量的行或数据，因此这是一个选项。如果那不可行，那么我可能会确定具有属性的行而不仅仅是索引以使该表更具可伸缩性。如果你不这样做，那么在你添加越来越多的功能之后，它将很难跟上。

Answer 2

以下内容会在您添加新行时重置第一个输入的值。我不太清楚你为什么要这个功能。对于最终用户来说，这似乎有点违反直觉，但是，在这里，你去了：

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;
    //alert(newcell.childNodes);
    switch (newcell.childNodes[0].type) {
      case "text":
        var myInput = table.rows[1].cells[1].querySelector("input");
        newcell.childNodes[0].value = myInput.value;
        myInput.value = "";
        break;
      case "checkbox":
        newcell.childNodes[0].checked = false;
        break;
      case "select-one":
        newcell.childNodes[0].selectedIndex = 0;
        break;
    }
  }
  //table.getElementsByTagName("td")[1].getElementsByTagName("input").value = "test";
  //console.log(table.getElementsByTagName("td")[1].getElementsByTagName("input").value);
  //clearForm();
}

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

    for (var i = 0; i < rowCount; i++) {
      var row = table.rows[i];
      var chkbox = row.cells[0].childNodes[0];
      if (null != chkbox && true == chkbox.checked) {
        if (rowCount <= 1) {
          alert("Cannot delete all the rows.");
          break;
        }
        table.deleteRow(i);
        rowCount--;
        i--;
      }
    }
  } catch (e) {
    alert(e);
  }
}

<form action="#" method="post">
  <input type="button" value="Add Row" onclick="addRow('dataTable')" />
  <input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
  <table id="dataTable" width="550px" border="1">
    <tbody>
      <thead>
        <tr>
          <th>Select </th>
          <th>Name</th>
        </tr>
      </thead>
      <tr>
        <td><input type="checkbox" name="chk" /></td>
        <td><input type="text" name="name"></td>
      </tr>
    </tbody>
  </table>
</form>