簡體   English   中英

Jquery:我想按列將數據添加到一個簡單的 html 表

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM