引导表动态添加行Javascript

Bootstrap table add row dynamically Javascript

本文关键字：添加行 Javascript 动态      更新时间：2023-09-26

我在插入表行时遇到问题，我正在尝试做一些事情，但效果不佳。有人能告诉我如何用自动递增来修复添加按钮吗
我的简单代码如下。感谢您的回复。

<!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>

我在JSFiddle中为您创建了一个正在运行的示例。我是在您处理示例时创建的，它实际上正在协同工作（尽管它添加了一个额外的editbox，但第一行模板中没有）。

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上运行良好。

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

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

  2. 获取对要更新的表的引用：var table=document.getElementById（"t1"）；

  3. 看看它（看看它是什么样子）：

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

  4. 查看其属性：

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

  5. 看起来您引用的是一个不存在deleteRow(..)的javascript函数。您可能希望提供该函数（最初只是一个存根）或删除该引用。

相关文章：