Soy nuevo en js y estoy buscando a alguien que me ayude con eso. He creado una tabla javascript con el siguiente código:
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> Estoy tratando de aplicar la función de código dada a continuación con <td>${ply.name}</td> en mi tabla js
Función de código js que quiero aplicar https://jsfiddle.net/tdwcqze0/
Usar:
<td>${generate_colored_span(ply.name).innerHTML}</td>
En vez de
<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>