引导表动态添加行Javascript

Question

我在插入表格行时遇到问题，我正在尝试做一些事情，但是效率不高。 谁能帮助我展示如何使用自动增量功能来修复添加按钮？
我的简单代码如下。 感谢您的任何答复。

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
        border-collapse: collapse;
        margin: 100px;
    }

    table, td, th {
        border: 1px solid black;
        padding: 10px;
    }

        table td.crossed {
            background-image: linear-gradient(to bottom right, transparent calc(50% - 1px), red, transparent calc(50% + 1px));
        }
</style>
</head>
<body>
  <table id="t1">
    <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th><input style="margin-top:-200px; padding:10px" type="button" value="Add Row" onclick="add()" /></th>
    </tr>

    <tr>
        <td>1.</td>
        <td>
            <input type="checkbox" />
        </td>
        <td>
            <input type="date" id="mydate">
        </td>
        <td contenteditable='true'></td>
        <td> <input type="button" value="Delete Row" onclick="deleteRow(this)" /></td>
    </tr>
</table>

<script>



</script>
</body>
</html>

Answer 1

几个调试/故障排除技巧可以帮助您自己找出答案：

1. 打开浏览器的控制台。 例如在chrome上，转到“更多工具”->“开发人员工具”。

2. 获取对您要更新的表的引用：var table = document.getElementById（“ t1”）;

3. 检查一下（看它看起来像什么）：

   console.log ('table:',table);

4. 查看其属性：

   for (var property in table){ console.log('property:', property); }

5. 看来您引用的JavaScript函数不存在deleteRow(..) 。 您可能想提供该功能（最初只是存根）或删除该引用。

Answer 2

我在JSFiddle中创建了一个有效的示例。 我是在您处理样本时创建的，而样本恰好在实际运行（尽管它添加了一个额外的编辑框，但第一行模板中没有此编辑框）。

function createRowColumn(row) {
  var column = document.createElement("td");
  row.appendChild(column);
  return column;
}

function addRow() {
  var newrow = document.createElement("tr");
  var numericColumn = createRowColumn(newrow);
  var checkColumn = createRowColumn(newrow);
  var dateColumn = createRowColumn(newrow);
  var emptyColumn = createRowColumn(newrow);
  var removeColumn = createRowColumn(newrow);

  var checkbox = document.createElement("input");
  checkbox.setAttribute("type", "checkbox");
  checkColumn.appendChild(checkbox);

  var datebox = document.createElement("input");
  datebox.setAttribute("type", "date");
  //datebox.setAttribute("id", "mydate"); //don't reuse id's
  dateColumn.appendChild(datebox);

  emptyColumn.setAttribute("contenteditable", "true");

  var remove = document.createElement("input");
  remove.setAttribute("type", "button");
  remove.setAttribute("value", "Delete Row");
  remove.setAttribute("onClick", "deleteRow(this)");
  removeColumn.appendChild(remove);

  var table = document.getElementById('t1');
  var tbody = table.querySelector('tbody') || table;
  var count = tbody.getElementsByTagName('tr').length;
  numericColumn.innerText = count.toLocaleString() + '.';

  tbody.appendChild(newrow);
}

这是您在JSFiddle中提供的示例，该示例在Chrome上运行良好。