引导表动态添加行Javascript_Javascript_Html_Css

引导表动态添加行Javascript

javascript html css

引导表动态添加行Javascript,javascript,html,css,Javascript,Html,Css,我在插入一个表行时遇到问题，我正在尝试做一些事情，但效果不佳。有人能帮我演示一下如何用自动增量修复“添加”按钮吗我的简单代码如下所示。谢谢你的回复 <!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; margin: 100px; } table, td, th { border:

我在插入一个表行时遇到问题，我正在尝试做一些事情，但效果不佳。有人能帮我演示一下如何用自动增量修复“添加”按钮吗
我的简单代码如下所示。谢谢你的回复

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


桌子{
边界塌陷：塌陷；
利润率：100像素；
}
表，td，th{
边框：1px纯黑；
填充：10px；
}
表td.1{
背景图像：线性渐变（右下角，透明钙（50%-1px），红色，透明钙（50%+1px））；
}
1.

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

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

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

查看它（查看它的外观）：

console.log（'table:'，table）


查看其属性：
for（表中的var属性）{console.log（'property:'，property）；}

看起来您引用的javascript函数不存在deleteRow（..）
。您可能希望提供该函数（最初只是一个存根）或删除该引用
我为您创建了一个有效的示例。我在您处理示例时创建了它，它实际上正在工作（尽管它添加了一个在第一行模板中不存在的额外编辑框）
这是您在中提供的示例，它似乎在Chrome上运行良好
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);
}