需要澄清有關使用js創建動態html表的信息
[英]Need a clarification on creating dynamic html table using js
問題描述
我想使用html和js創建一個動態表。 我把下面的代碼，它不能正常工作。 我可以通過多種方式做到這一點。 但我想知道為什么此代碼無法正常工作。
這是我的代碼
let data = [{ id: 1, name: 'ssss' }, { id: 2, name: 'bbbb' } ] document.getElementById("test").innerHTML = `<table><tr><th>S.no</th><th>title</th></tr>`; data.forEach(item => { document.getElementById("test").innerHTML += "<tr><td>" + item.id + "</td><td>" + item.name + "</td></tr>"; console.log(item); }); console.log("ssss"); document.getElementById("test").innerHTML += "</table>";
<p id="test"> </p>
我得到的輸出如下
S.no title
1ssss2bbbb
我的預期輸出是
S.no title
1 ssss
2 bbbb
4 個解決方案
解決方案1
0 2018-05-17 05:52:56
從一開始就將</table>放入HTML字符串中。
test是一個<p>元素，而不是一個table元素。 選擇table元素，它是<p>的直接后代。
如果您感到困惑，那么首先將元素提取到描述性變量名稱中會更清楚，例如：
let data = [{ id: 1, name: 'ssss' }, { id: 2, name: 'bbbb' } ] const p = document.getElementById("test"); p.innerHTML = `<table><tr><th>S.no</th><th>title</th></tr></table>`; const table = p.children[0]; data.forEach(item => { table.innerHTML += "<tr><td>" + item.id + "</td><td>" + item.name + "</td></tr>"; });
<p id="test"> </p>
解決方案2
0 2018-05-17 05:57:19
像這樣完成所有工作后，嘗試設置表格：
let data = [{ id: 1, name: 'ssss' }, { id: 2, name: 'bbbb' } ] var x = `<table><tr><th>S.no</th><th>title</th></tr>`; data.forEach(item => { x += "<tr><td>" + item.id + "</td><td>" + item.name + "</td></tr>"; }); x += "</table>"; document.getElementById("test").innerHTML = x console.log(x)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <p id="test"> </p> </body> </html>
解決方案3
0 2018-05-17 06:04:44
嘗試為表的<tbody>部分設置id並使用js設置innerHTML ，如下所示：
let data = [{ id: 1, name: 'ssss' }, { id: 2, name: 'bbbb' } ] document.getElementById("test").innerHTML = `<table><tr><th>S.no</th><th>title</th></tr><tbody id="tableBody"></tbody></table>`; data.forEach(item => { document.getElementById("tableBody").innerHTML += "<tr><td>" + item.id + "</td><td>" + item.name + "</td></tr>"; console.log(item); }); console.log("ssss"); document.getElementById("test").innerHTML += "</table>";
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <p id="test" /> </body> </html>
解決方案4
0 2018-05-17 06:07:43
我對您的方法做了一些修改：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <p id="test"> </table> </p> <script> let data = [{ id: 1, name: 'ssss' }, { id: 2, name: 'bbbb' } ] var table = document.createElement('table'); var thead = document.createElement('thead'); var tbody = document.createElement('tbody'); var tr = document.createElement('tr'); var td = document.createElement('td'); var columns = ['S.No','Title']; var tcol = []; //creating the header while assuming all the headers are present in 1st row Object.keys(data[0]).forEach(col=>{ tcol.push(col); }); for(var i=0;i<columns.length;i++) { var th = document.createElement('th'); th.innerHTML = columns[i]; tr.appendChild(th); } thead.appendChild(tr); //appending the created headers to the table object table.appendChild(thead); //creating the body data.forEach(item => { tr = document.createElement('tr'); for (var i = 0; i < tcol.length; i++) { var td = document.createElement('td'); td.innerHTML = item[tcol[i]]; tr.appendChild(td); } //appending the created row to the table body tbody.appendChild(tr); }); table.appendChild(tbody); //finally putting the table's html to your desired div document.getElementById("test").innerHTML = table.outerHTML; </script> </body> </html>
我假設您的第一行如果不嘗試將這些列作為單獨的實體傳遞，則其中大部分將包含一列。
使用JSON，HTML，JS和CSS為移動平台創建動態菜單
[英]creating dynamic menu using json, Html, JS & css for mobile platforms
如何在不知道數據的情況下呈現動態表？ 使用HTML和JS
[英]How to render dynamic table without knowing the data? using HTML and JS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.