javascript-如何用js添加表格？

我想通过JavaScript在html表格上添加表格.

我已经尝试使用appendChild和insertBefore方法,但是这些方法无效.

这是我的JavaScript：

var utilisateur = [{
    id: 51,checked: false,prenom: "Dolores",date: "Fermière",examen: "host",note: "ww.dolores@gmail.com"
  },{
    id: 52,checked: true,prenom: "Bernard",date: "Robopsycologue",examen: "human",note: "ww.bernard@gmail.com"
  }
  // {
  //   id: 3,//   name: "Robert",//   job: "Directeur",//   specie: "human",//   email: "ww.robert@gmail.com"
  // },// {
  //   id: 4,//   name: "Maeve",//   job: "Maquerelle",//   specie: "host",//   email: "ww.maeve@gmail.com"
  // },// {
  //   id: 5,//   name: "Teddy",//   job: "Inconnu",//   email: "ww.teddy@gmail.com"
  // },// {
  //   id: 6,//   name: "William",//   job: "Actionnaire",//   email: "ww.william@gmail.com"
  // },// {
  //   id: 7,//   name: "Elsie",//   job: "Programmeuse",//   email: "ww.elsie@gmail.com"
  // },// {
  //  id: 8,//  name: "Nathanael",//  job: "Dev",//  specie: "human",//  email: "s.nathanael@outlook.fr" 
  // }
];
for (let i = 0; i < 100; i++) {
  var row = document.createElement("tr");
  var cell0 = document.createElement("td");
  var cell1 = document.createElement("td");
  var atr = document.createAttribute("class");
  atr.value = "bs-checkBox";
  cell1.setAttributeNode(atr);
  var para = document.createElement("input");
  var para1 = document.createAttribute("data-index");
  var para2 = document.createAttribute("name");
  var para3 = document.createAttribute("type");
  para1.value = "0";
  para2.value = "btSelectItem";
  para3.value = "checkBox";
  para.setAttributeNode(para1);
  para.setAttributeNode(para2);
  para.setAttributeNode(para3)
  cell1.appendChild(para);
  // var cell1 = '<td class="bs-checkBox"></td>'
  //alert(cell1).innerText;
  var cell2 = document.createElement("td");
  var cell3 = document.createElement("td");
  var cell4 = document.createElement("td");
  var cell5 = document.createElement("td");
  var cell6 = document.createElement("td");
  var cell7 = document.createElement("td");
  var cell8 = document.createElement("td");
  cell0.innerText = utilisateur[i].id;
  cell1.innerText = utilisateur[i].checked
  cell2.innerText = utilisateur[i].prenom;
  cell3.innerText = utilisateur[i].date;
  cell4.innerText = utilisateur[i].examen;
  cell5.innerText = utilisateur[i].note;
  row.appendChild(cell0);
  row.appendChild(cell1);
  row.appendChild(cell2);
  row.appendChild(cell3);
  row.appendChild(cell4);
  row.appendChild(cell5);
  // row.appendChild(cell6);
  // row.appendChild(cell7);
  // row.appendChild(cell8);
  // document.getElementsById("tbody")[0].appendChild(row);
  // var elem = document.getElementsById("tabs1");
  // var mychild = document.getElementById("")
  // elem.insertBefore(mypara,mychild);
  // elem.appendChild(row);
  var element = document.getElementById("tabs1")[0];
  element.appendChild(row);
}
$(document).ready(function() {
  $(cell1).toggleClass("bs-checkBox");
});

这是我的HTML：

<div class="tabs" id="tabs1">
  <!-- <table class="table">
    <thead class="thead-dark">
      <tr>
        <th scope="col">#</th>
        <th class="col">Name</th>
        <th class="col">Job</th>
        <th class="col">Attribut</th>
        <th class="col">Email</th>
      </tr>
    </thead>
  </table> -->
</div>
<table class="table" data-click-to-select="true" data-filter-control="true" data-search="true" data-show-export="true" data-toggle="table" data-toolbar="#toolbar" id="table">
  <thead>
    <tr>
      <th id="0" style="visibility: hidden; display: none;"></th>
      <th data-checkBox="true" data-field="state"></th>
      <th data-field="prenom" data-filter-control="input" data-sortable="true">Prénom</th>
      <th data-field="date" data-filter-control="select" data-sortable="true">Date</th>
      <th data-field="examen" data-filter-control="select" data-sortable="true">Examen</th>
      <th data-field="note" data-sortable="true">Note</th>
    </tr>
  </thead>
  <tbody id="tbody">
    <tr>
      <td id="1" style="visibility: hidden; display: none;"></td>
      <td class="bs-checkBox"><input data-index="0" name="btSelectItem" type="checkBox"></td>
      <td>Valérie</td>
      <td>01/09/2015</td>
      <td>Français</td>
      <td>12/20</td>
    </tr>
  </tbody>
</table>

我想在tbody的div上添加表JavaScript,但是他总是追随我的tbody.

问题是,即使我为我的JavaScript创建了另一个div,他也永远不会继续进行此div操作,因此我想将我的JavaScript放在div选项卡上.

最佳答案

您可以使用简单的解决方案,即使用ES6字符串插值

例如,我们有一个对象数组

employees: [
 {
    name: 'John Doe',phone: '00000000',},{
   name: 'George Daniels',phone: '11111111',}
]

和表格html对象.

您可以像这样追加行：

for (let employee of employees) {
    let row = document.createElement("tr");
    row.innerHTML = `<td>${employee.name}</td>
                     <td>${employee.phone}</td>`;
    table.appendChild(row);
   }

原文链接：https://www.f2er.com/html/530532.html

javascript-如何用js添加表格？

猜你在找的HTML相关文章