Change the result of a TD value for a dynamic table image

Question

I’m developing a visual availability map, and I created a dynamic table, so far everything right. I need to get the result of <td> and transform into images.

Example: my <td> returns 900, I need to change this value to an X image; mine <td> returns 100, change this value to image Y. understood?

Follow below my Javascript.

var div = document.getElementById("situacao1");

            //var dataset = DatasetFactory.getDataset("colleague", null, null, null);
            //var dataset = DatasetFactory.getDataset("dsEmpreendimentos", null, constraints, null);
            try {
            var dataset = DatasetFactory.getDataset("dsUnidadeVenda", null, constraints, null);
            div.innerHTML = showDataset(dataset);
            } catch(erro) {
                div.innerHTML = erro;
            }
        }

function showDataset(dataset) {
    var tabela = "<table id=minhaTabela>";

    //Monta o cabeçalho
    tabela += "<tr>";
    for (var i = 0; i < dataset.columns.length; i++) {
        tabela += "<th>" + dataset.columns[i] + "</th>";
    }
    tabela += "</tr>";

    //Monta os registros   
    for (var x = 0; x < dataset.values.length; x++) {
        tabela += "<tr>";
        var row = dataset.values[x];
        for (var y = 0; y < dataset.columns.length; y++) {
            tabela += "<td id=td_sit>" + row[dataset.columns[y]] + "</td>";
        }
        tabela += "</tr>";
    }

    tabela += "</table>";
    return tabela;
}

The return of Javascript in HTML is this.

There’s only one result column.

Below is the return of the Result, of the question.

Answer 1

You can do it this way (see comments in the code):

// seleciona as TDs
var cols = document.querySelectorAll("#minhaTabela td");

// percorre as TDs
for(var x = 0; x < cols.length; x++){

   // pega o número da TD
   switch(Number(cols[x].textContent)){
      
      // insere a imagem de acordo com o número dentro da TD
      
      case 100:
      cols[x].innerHTML = '<img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">';
      break;
      
      case 900:
      cols[x].innerHTML = '<img src="https://tinyjpg.com/images/social/website.jpg">';
      break;

   }
   
}

img{
   width: 100px;
}

<table id=minhaTabela border="1">
   <tr>
      <th>
         col
      </th>
   </tr>
   <tr>
      <td>
         100
      </td>
   </tr>
   <tr>
      <td>
         900
      </td>
   </tr>
   <tr>
      <td>
         100
      </td>
   </tr>
</table>

In your case, put the code inside the try after the div.innerHTML:

try {

   var dataset = DatasetFactory.getDataset("dsUnidadeVenda", null, constraints, null);
   div.innerHTML = showDataset(dataset);


   // seleciona as TDs
   var cols = document.querySelectorAll("#minhaTabela td");

   // percorre as TDs
   for(var x = 0; x < cols.length; x++){

      // pega o número da TD
      switch(Number(cols[x].textContent)){

         // insere a imagem de acordo com o número dentro da TD

         case 100:
         cols[x].innerHTML = '<img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">';
         break;

         case 900:
         cols[x].innerHTML = '<img src="https://tinyjpg.com/images/social/website.jpg">';
         break;

      }

   }

} catch(erro) {
   div.innerHTML = erro;
}

Using an object

You can also create an object and keep the path of the images according to the number. I think it makes it easier to organize and dry the code more:

var imgs_ = {
   "100": "https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg",
   "900": "https://tinyjpg.com/images/social/website.jpg"
}

// seleciona as TDs
var cols = document.querySelectorAll("#minhaTabela td");

// percorre as TDs
for(var x = 0; x < cols.length; x++){

   // insere a imagem de acordo com o número
   cols[x].innerHTML = '<img src="'+imgs_[Number(cols[x].textContent)]+'">';

}

img{
   width: 100px;
}

<table id=minhaTabela border="1">
   <tr>
      <th>
         col
      </th>
   </tr>
   <tr>
      <td>
         100
      </td>
   </tr>
   <tr>
      <td>
         900
      </td>
   </tr>
   <tr>
      <td>
         100
      </td>
   </tr>
</table>

Answer 2

Good morning, my friend. I’m not sure I understand your question. Can you give me more details? If your question is about how to change the tag "src" attribute <img> you can do this using jquery yourself. Assign an id to the tag <img> and then do the following:

$("#id_tag_imagem").attr("src", "caminho_arquivo_imagem.jpg");

If this does not help you, comment here giving us more details about your question so that it is easier to help you.

Hugs.