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

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

打开浏览器的控制台。例如在chrome上转到“更多工具” - ＆gt; “开发者工具”。
获取您要更新的表的引用： var table = document.getElementById（“t1”）;
检查出来（看看它是什么样的）：

console.log ('table:',table);
查看其属性：

for (var property in table){ console.log('property:', property); }
看起来你正在引用一个不存在的javascript函数deleteRow(..)。您可能希望提供该功能（最初只是一个存根）或删除该引用。

Answer 2

我在JSFiddle创建了一个正在运行的示例。我在您处理样本时创建了它，并且实际上正在工作（尽管它添加了第一行模板中没有的其他编辑框）。

DateTime

以下是您在JSFiddle中提供的示例，似乎在Chrome上运行正常。

Bootstrap表动态添加行Javascript

2 个答案: