如何用js添加表格？

时间：2019-06-11 07:54:07

标签： javascript html css

我想通过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",
  //   specie: "host",
  //   email: "ww.teddy@gmail.com"
  // },
  // {
  //   id: 6,
  //   name: "William",
  //   job: "Actionnaire",
  //   specie: "human",
  //   email: "ww.william@gmail.com"
  // },
  // {
  //   id: 7,
  //   name: "Elsie",
  //   job: "Programmeuse",
  //   specie: "human",
  //   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>

我想在div的{​​{1}}上添加表JavaScript，但是他总是紧跟着我的tbody。

问题是，即使我为我的JavaScript创建另一个tbody，他也永远不会继续使用此div，所以我想将我的JavaScript放在我的div标签上。

3 个答案:

答案 0 :(得分：2)

您可以使用简单的解决方案，即使用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);
   }

答案 1 :(得分：0)

您不能在表主体内部添加<div>，因此将其放置在表主体之外，插入内容也是如此。如果您更改此代码：

var element = document.getElementById("tabs1")[0];
element.appendChild(row);

对此：

var element = document.getElementById("tbody");
element.appendChild(row);

似乎有些奏效。参见：https://jsfiddle.net/KIKO_Software/kqr48uxj/4/

现在将新行添加到表主体中。

答案 2 :(得分：0)

许多问题...

您不能将<div>作为<tbody>的子元素，因为这是无效的HTML ...所以我建议您删除<div>（还要记住，您可以在<tbody>中包含多个<table>标签，这意味着您可以将它们分为具有单独id属性的部分，依此类推。）

document.getElementById("tabs1")的函数调用将返回单个对象，而不是数组-因此，您无需在末尾使用[0] ... 

var element = document.getElementById("tabs1");

最后，您在for循环中从0到99，但是您提供的数据仅从0到1（或带注释数据的0到7）...但是，您尝试访问utilisateur[i]，并且如果i的值大于数组中数据项的数量，则会在开发人员控制台中收到错误消息。因此，您需要检查utilisateur.length ...

中是否有足够的项目 
if (i < utilisateur.length) {
  cell0.innerText = utilisateur[i].id;
  cell1.innerText = utilisateur[i].checked
  ...
}


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"
  }
];

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");
  if (i < utilisateur.length) {
    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("tbody");
  element.appendChild(row);
}

$(document).ready(function(){
    $(cell1).toggleClass("bs-checkbox");
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" class="table"
            data-toggle="table"
            data-search="true"
            data-filter-control="true" 
            data-show-export="true"
            data-click-to-select="true"
            data-toolbar="#toolbar">
  <thead>
     <tr>
        <th id="0" style="visibility: hidden; display: none;"></th>
        <th data-field="state" data-checkbox="true"></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>

相关问题
最新问题