javascript - 使用Javascript向表中添加新行

当用户单击添加新按钮时，应该在表的底部添加新行，但是当我单击该按钮时，什么也没有发生。该脚本对我来说看起来不错，我已经尝试了数小时的解决方案。

  function addRow(tableID) {
                var table = document.getElementById(tableID),
                    row = tbl.insertRow(tbl.rows.length),
                    i;
                for (i = 0; i < table.rows[0].cells.length; i++) {
                    createCell(row.insertCell(i), i, 'row');
                }
            }

 <head>
        <style>
         table, th, td{
            border: 1px solid black;
         }
        </style>
    </head>

    <body>
        <table id="countries">
            <thead>
                <tr>
                    <th>Country</td>
                    <th>Code</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Algeria</td>
                    <td>213</td>
                </tr>
            </tbody>
        </table>
        <button type="button" onclick="addRow('countries');">Add New</button>

    </body>

最佳答案

您可以尝试以下方法：

function addRow(tableID) {
  var table = document.getElementById(tableID),
      row = table.insertRow(table.rows.length),
      i;
  for (i = 0; i < table.rows[0].cells.length; i++) {
      createCell(row.insertCell(i), i, 'row');
  }
}

function createCell(cell, text, style) {
  var div = document.createElement('div'),
  txt = document.createTextNode(text);
  div.appendChild(txt);
  div.setAttribute('class', style);
  div.setAttribute('className', style);
  cell.appendChild(div);
}

<html>
  <title>Test</title>
  <head>
    <style>
     table, th, td{
        border: 1px solid black;
     }
    </style>
</head>

<body>
  <table id="countries">
  <thead>
      <tr>
          <th>Country</td>
          <th>Code</td>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>Algeria</td>
          <td>213</td>
      </tr>
  </tbody>
  </table>
  <button type="button" onclick="addRow('countries');">Add New</button>
</body>
</html>