[英]Jquery: I want to add data to a simple html table column wise
我有 3 個 JavaScript 對象,每個對象包含一列數據(它有 8 個條目)。 我想將此數據添加到 html 表中。 我可以使用第 n 個子項檢索列數據,但不能插入。
代碼片段:
countNovels = {
Ramesh: 5,
Kumar: 10,
Sameera: 15,
}
countTales = {
Ramesh: 2,
Kumar: 6,
Sameera: 8,
}
<table id="Summary" cellspacing="0">
<tr>
<th >Name</th>
<th >No. of Novels</th>
<th >No. of Fairytales</th>
<th >Total</th>
</tr>
<tbody></tbody>
</table>
var col = "<td style=\"max-width : 40px\">" + countNovels.Ramesh + "</td><td style=\"max-width : 40px\">" + countNovels.Kumar + "</td><td style=\"max-width : 40px\">" + countNovels.Sameera + "</td>";
$('#Summary td:nth-child(1)').text(col);
這不是實際代碼。 我想要這樣的 output
請幫忙。
在頁面加載時,抓住兩個對象迭代它們並將行添加到表的最后一個。
window.onload = function() { const countNovels = { Ramesh: 5, Kumar: 10, Sameera: 15, }; const countTales = { Ramesh: 2, Kumar: 6, Sameera: 8, }; function renderTable() { const tableRows = Object.entries(countNovels).reduce((acc, curr, index) => { const name = (curr[0] || ''); const novels = curr[1]; const tales = countTales[curr[0]]; const total = novels + tales; acc.push({ name, novels, tales, total }); return acc; }, []); const tableBody = document.querySelector('#Summary'); for (const tableRow of tableRows) { let newRow = tableBody.insertRow(-1); Object.values(tableRow).forEach((curr, index) => { let newCell = newRow.insertCell(index); let newText = document.createTextNode(curr); newCell.appendChild(newText); }); } } renderTable(); };
table, th, td { border: 1px solid black; }
<.DOCTYPE html> <html> <head> </head> <body> <table id="Summary"> <tr> <th>Name</th> <th>No. of Novels</th> <th>No. of Fairytales</th> <th>Total</th> </tr> <tbody></tbody> </table> </body> </html>
這是一個很好的問題:)
我創建的代碼片段適用於任意數量的源對象(因此最后是任意數量的列)。
轉換 function 並不理想——它可以生成更好的返回格式(因此 HTML 模板生成會更簡單)。
const countNovels = { Ramesh: 5, Kumar: 10, Sameera: 15, } const countTales = { Ramesh: 2, Kumar: 6, Sameera: 8, } // transformation function const transformObject = (arr) => { const r = arr.reduce((acc, c) => { // key - countNovels, countTales // obj - the source object content // k1 - the name of the person // v1 - the value of key-name (eg countTales-Ramesh = 2) const [ [key, obj] ] = Object.entries(c) Object.entries(obj).forEach(([k1, v1]) => { if (typeof acc[k1] === 'undefined') acc[k1] = {} acc[k1][key] = v1 }) return acc }, {}) return r } // running transformation with two objects const transformed = transformObject([{ countNovels }, { countTales } ]) // just a utility function const wrapTd = (item) => { return `<td>${item}</td>` } // creating the HTML template const addToTable = (obj) => { let html = '' for (key in obj) { const total = Object.values(obj[key]).reduce((a, c) => a + c, 0) // creating the columns for the numbers (including total) let values = '' Object.values(obj[key]).forEach(e => { values += wrapTd(e) }) values += wrapTd(total) // adding name and numbers to rows const template = ` <tr> ${wrapTd(key)} ${values} </tr> ` html += template } return html } // adding HTML string to DOM document.getElementById('tablebody').innerHTML = addToTable(transformed)
<table id="Summary" cellspacing="0"> <tr> <th>Name</th> <th>No. of Novels</th> <th>No. of Fairytales</th> <th>Total</th> </tr> <tbody id="tablebody"></tbody> </table>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.