How to get <TD> 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 "<td>"+studentsList[i][0]+"</td>". Why somewhere you use it and in other place forgot about that? — Justinas
– Justinas, Commented Jan 25, 2022 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
– Professor Abronsius, Commented Jan 25, 2022 at 14:14

Sarout · Accepted Answer · 2022-01-25 14:15:33Z

 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>"; }

Collectives™ on Stack Overflow

How to get <TD> title attribute to read array element?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related