How to get title attribute to read array element?

Question

I am trying to get my dynamically created HTML table to display text (contained within an array) on hover of a given cell, using the title attribute, but it will not read the contents of the array and instead reads the array name as a string.

Here is the table generating code and have attempted to add titles to cells of 2 columns currently:

var result = "<table id='dataEditTableid' class='stripe' border=1><thead><tr><th><b>Name</b></th><th><b>7.1</b></th><th><b>7.2</b></th><th><b>7.3</b></th><th><b>7.4</b></th><th><b>7.5</b></th><th><b>7.6</b></th><th><b>8.1</b></th><th><b>8.2</b></th><th><b>8.3</b></th><th><b>8.4</b></th><th><b>8.5</b></th><th><b>8.6</b></th><th><b>9.1</b></th><th><b>9.2</b></th><th><b>9.3</b></th><th><b>9.4</b></th><th><b>9.5</b></th><th><b>9.6</b></th></tr></thead>";
    result += "<tbody>";
    
    for (var i=0; i < studentsList.length; i++) {
        result += "<tr>";
        result += "<td>"+studentsList[i][0]+"</td>";
        result += "<td title = studentsList[i][3] style='background-color: "+redBlue(studentsList[i][3])+";' id=" + i+3 + "></td>";
        result += "<td title = studentsList[i][4] style='background-color: "+redBlue(studentsList[i][4])+";' id=" + i+4 + "></td>";
        result += "<td style='background-color: "+redBlue(studentsList[i][5])+";' id=" + i+5 + "></td>";
        result += "<td style='background-color: "+redBlue(studentsList[i][6])+";' id=" + i+6 + "></td>";
        result += "<td style='background-color: "+redBlue(studentsList[i][7])+";' id=" + i+7 + "></td>";
        result += "<td style='background-color: "+redBlue(studentsList[i][8])+";' id=" + i+8 + "></td>";
        result += "<td style='background-color: "+redBlue(studentsList[i][9])+";' id=" + i+9 + "></td>";
        result += "<td style='background-color: "+redBlue(studentsList[i][10])+";' id=" + i+10 + "></td>";
        result += "<td style='background-color: "+redBlue(studentsList[i][11])+";' id=" + i+11 + "></td>";
        result += "<td style='background-color: "+redBlue(studentsList[i][12])+";' id=" + i+12 + "></td>";
        result += "<td style='background-color: "+redBlue(studentsList[i][13])+";' id=" + i+13 + "></td>";
        result += "<td style='background-color: "+redBlue(studentsList[i][14])+";' id=" + i+14 + "></td>";
        result += "<td style='background-color: "+redBlue(studentsList[i][15])+";' id=" + i+15 + "></td>";
        result += "<td style='background-color: "+redBlue(studentsList[i][16])+";' id=" + i+16 + "></td>";
        result += "<td style='background-color: "+redBlue(studentsList[i][17])+";' id=" + i+17 + "></td>";
        result += "<td style='background-color: "+redBlue(studentsList[i][18])+";' id=" + i+18 + "></td>";
        result += "<td style='background-color: "+redBlue(studentsList[i][19])+";' id=" + i+19 + "></td>";
        result += "<td style='background-color: "+redBlue(studentsList[i][20])+";' id=" + i+20 + "></td>";
        result += "</tr>";
    }

    
    result += "</tbody></table>";
    
    dataTable.innerHTML = result;

What have I done wrong?

You put simple text into HTML. Do the same (string concatenation) as with `""+studentsList[i][0]+""`. Why somewhere you use it and in other place forgot about that? — Justinas, Jan 25 '22 at 14:06
without doubt there should be a much cleaner way of doing what it looks like you are doing. An ID attribute should not be simply an integer ( though there is some debate whether it is now valid to do so ) but it is unclear what you mean - do you refer simply to `title = studentsList[i][3]`? The text value should be within quotes and you'd need to escape from the current quotes before concatenating this string in there. — Professor Abronsius, Jan 25 '22 at 14:14

Sarout · Accepted Answer · 2022-01-25T14:15:33.520

 result += "<td title='"+ studentsList[i][4] +"' style='background-color: "+redBlue(studentsList[i][4])+";' id=" + i+4 + "></td>";

you've messed quotations, please replace this with the older ones

also, no need to repeat stuff just add another for loop inside the for:

for (var i = 0; i < studentsList.length; i++) {
  result += "<tr>";
  result += "<td>" + studentsList[i][0] + "</td>";
  result += "<td title='"+ studentsList[i][3] +"' style='background-color: "+redBlue(studentsList[i][3])+";' id=" + i+3 + "></td>";
  result += "<td title='"+ studentsList[i][4] +"' style='background-color: "+redBlue(studentsList[i][4])+";' id=" + i+4 + "></td>";
  for (var j = 4; j = < 20; i++) {
    result += "<td style='background-color: " + redBlue(studentsList[i][j]) + ";' id=" + i + j + "></td>";
  }
  result += "</tr>";
}

How to get title attribute to read array element?

1 Answers1