Adding function to td table in javascript

I’m new to js and looking for someone to help me with it. I have created javascript table with the following code:

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>

I’m trying to apply given below code function with the <td>${ply.name}</td> in my table js

js code function I want to apply https://jsfiddle.net/tdwcqze0/

Answer

Use:

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

Instead of

<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>