How to dynamically set id of <TD> when creating HTML table via iteration and then get ID value onBlur action?

Question

I am trying to dynamically create an HTML table by iterating through an array, and on each iteration, set the id of a particular cell with the value of i, from the stepper variable in the for loop. I then want to be able to access the cells ID following an onBlur event.

This is what I have tried:

        function saveToDB(id) {
            document.write(id);
        }
        
        function makeEditTableHTML(studentArray) {
                var result = "<table id='dataEditTableid' class='stripe' border=1><thead><tr><td><b>ID</b></td><td><b>Student Email</b></td><td><b>Target</b></td></tr></thead>";
                result += "<tbody>";
                for(var i=0; i<studentArray.length; i++) {
                    result += "<tr>";
                    result += "<td>"+studentArray[i][1]+"</td>";
                    result += "<td>"+studentArray[i][0]+"</td>";
                    result += "<td id=i contenteditable='true' onBlur='saveToDB(this.id)'></td>";
                    result += "</tr>";
                }
                result += "</tbody></table>";

                return result;
            }

The document.write is just for testing purposes, but it consistently outputs the letter i regardless of the cell being edited.

How can I program it so that the active cell's id value is passed into the saveToDB function, when the onBlur event occurs?

Thanks in advance.

Answer 1

You are hard-coding the letter i into the cell. You need to concatenate it, so:

"<td id=i contenteditable='true' onBlur='saveToDB(this.id)'></td>";

needs to be:

"<td id=" + i + " contenteditable='true' onBlur='saveToDB(this.id)'></td>";