Bootstrap HTML table 由 javascript 生成

Question

这是我的HTMLtable（我用的是Bootstrap）：

<table class="table" id="myTable">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">From</th>
              <th scope="col">Status</th>
              <th scope="col">Message</th>
              <th scope="col">Accept?</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>Mark</td>
              <td>Pending</td>
              <td>Help me!</td>
            </tr>
            <tr>
              <th scope="row">1</th>
              <td>Mark</td>
              <td>Pending</td>
              <td>Help me!</td>
            </tr>
          </tbody>
        </table>

现在我想以这种方式从javascript自动生成它：

var table=document.getElementById('myTable');

function myFunction() {


    var index = 0;


        var row = table.insertRow(index);


        for(i=0;i<2;i++){
            var cell=row.insertCell(i)
            cell.innerHTML = '<tr><th scope="row">1</th><td>Mark</td><td>Pending</td><td>Help me!</td></tr>'

        }

        index++;
    }

当然，HTML 页面和 javascript 链接使用，然后在 html 页面的底部我添加：

<script>
$(document).ready(myFunction())
</script>

Answer 1

如果要为行附加完整的 html，请不要尝试使用 insertRow/insertCell "features"，而是：

var tbody = document.querySelector("#myTable tbody");

function myFunction() {
  for(var i=0;i<2;i++){
    tbody.innerHTML += '<tr><th scope="row">1</th><td>Mark</td><td>Pending</td><td>Help me!</td></tr>';
  }
}

Bootstrap HTML table 由 javascript 生成

Boostrap HTML table generated by javascript

javascript

html-table

bootstrap-table