如何用js添加表格? [英] How adding a table with js?
问题描述
我想通过 JavaScript 在我的 html 表格中添加一个表格.
我已经尝试过使用 appendChild 和 insertBefore 方法，但这些方法都不起作用.
这是我的 JavaScript:
var utilisateur = [{编号:51，检查:错误，prenom:多洛雷斯"，日期:费米埃尔"，考试:主持人"，注意:ww.dolores@gmail.com"}, {编号:52，检查:正确，prenom:伯纳德"，日期:Robopsycologue"，考试:人类"，注意:ww.bernard@gmail.com"}//{//id: 3,//名称:罗伯特"，//工作:导演"，//物种:人类"，//电子邮件:ww.robert@gmail.com"//},//{//id: 4,//名称:梅芙"，//工作:Maquerelle"，//物种:主机"，//电子邮件:ww.maeve@gmail.com"//},//{//id: 5,//名称:泰迪"，//工作: "Inconnu",//物种:主机"，//电子邮件:ww.teddy@gmail.com"//},//{//id: 6,//名称:威廉"，//工作:Actionnaire"，//物种:人类"，//电子邮件:ww.william@gmail.com"//},//{//id: 7,//名称:艾尔西"，//作业:程序使用"，//物种:人类"，//电子邮件:ww.elsie@gmail.com"//},//{//id: 8,//name: "拿但业",//工作:开发"，//物种:人类"，//电子邮件:s.nathanael@outlook.fr"//}];for (让 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("输入");var para1 = document.createAttribute("data-index");var para2 = document.createAttribute("name");var para3 = document.createAttribute("type");para1.value = "0";para2.value = "btSelectItem";para3.value = "复选框";para.setAttributeNode(para1);para.setAttributeNode(para2);para.setAttributeNode(para3)cell1.appendChild(para);//var cell1 = '<td class="bs-checkbox"></td>'//警报(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].checkedcell2.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:
<!-- <table class="table"><thead class="thead-dark"><tr><th scope="col">#</th><th class="col">Name</th><th class="col">作业</th><th class="col">属性</th><th class="col">电子邮件</th></tr></thead>--><table class="table" data-click-to-select="true" data-filter-control="true" data-search="true" data-show-export="true" data-toggle="table" 数据工具栏="#toolbar" id="表格"><头><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">日期</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>瓦莱丽</td><td>01/09/2015</td><td>法语</td><td>12/20</td></tr></tbody>
我想在 tbody 上的 div 上添加我的表格 JavaScript，但他总是跟踪我的 tbody.
问题是，即使我为我的 JavaScript 创建另一个 div，他也不会继续这个 div，所以我想把我的 JavaScript 放在我的 div tabs1.
你可以使用一个简单的解决方案，使用 ES6 字符串插值
例如我们有一个对象数组
员工:[{name: 'John Doe',电话:'00000000'，},{名称:'乔治·丹尼尔斯'，电话:'11111111'，}]和一个表格 html 对象.
您可以像这样附加行:
for(让员工的员工){let row = document.createElement("tr");row.innerHTML = `<td>${employee.name}</td><td>${employee.phone}</td>`;table.appendChild(row);}I want add a table on my html table via JavaScript.
I've already tried using the appendChild and insertBefore methods, but those didn't work.
Here is my 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");
});
Here is my 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>
I want add my table JavaScript on my div on tbody, but he always go after my tbody.
The problem is, even if i create another div for my JavaScript, he never go on this div, so i want put my JavaScript on my div tabs1.
You can use a simple solution, using ES6 string interpolation
For example we have an array of objects
employees: [
{
name: 'John Doe',
phone: '00000000',
},
{
name: 'George Daniels',
phone: '11111111',
}
]
and a table html object.
you can append rows like this:
for (let employee of employees) {
let row = document.createElement("tr");
row.innerHTML = `<td>${employee.name}</td>
<td>${employee.phone}</td>`;
table.appendChild(row);
}
这篇关于如何用js添加表格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
