在javascript中向td表添加函数

Question

我是 js 新手，正在寻找可以帮助我的人。 我用以下代码创建了 javascript 表：

 data = { players: [ { name: 'aphra', score: 10, ping: 20 } ] }; const addRow = (el, data) => { if (data.players.length) { data.players.forEach((ply) => { const row = document.createElement("tr"); row.innerHTML = ` <td>${ply.name}</td> <td>${ply.score}</td> <td>${ply.ping == '0' ? 'BOT' : ply.ping}</td> `; el.appendChild(row); }); } }; const table = document.getElementById('id') addRow(table, data);

 <table id="id"></table>

我正在尝试在我的表 js 中使用<td>${ply.name}</td>应用下面给出的代码函数

js代码函数我要申请https://jsfiddle.net/tdwcqze0/

Answer 1

利用：

<td>${generate_colored_span(ply.name).innerHTML}</td>

代替

<td>${ply.name}</td>

 function generate_colored_span(text, className = null) { let cont = document.createElement('span') let txtary = [] let curtxt = '' let curcol = '7' for (let i = 0; i < text.length; i++) { if (text[i] == '^') { if (curtxt) { curobj = {} curobj.txt = curtxt curobj.col = curcol txtary.push(curobj) } curtxt = '' i += 1 curcol = text[i] } else { curtxt += text[i] } } curobj = {} curobj.txt = curtxt curobj.col = curcol txtary.push(curobj) txtary.forEach((txt) => { let txtsp = document.createElement('span') txtsp.className = 'tracker_col' + txt.col txtsp.appendChild(document.createTextNode(txt.txt)) cont.appendChild(txtsp) }) if (className) cont.className = className return cont } const addRow = (el, data) => { if (data.players.length) { data.players.forEach((ply) => { const row = document.createElement("tr"); row.innerHTML = ` <td>${generate_colored_span(ply.name).innerHTML}</td> <td>${ply.score}</td> <td>${ply.ping == '0' ? 'BOT' : ply.ping}</td> `; el.appendChild(row); }); } }; const table = document.getElementById('id') addRow(table, { players: [{ name: 'foo', score: 1, ping: 0 }] });

 .tracker_col7 { background: red; }

 <table id="id"></table>