Javascript to generate a dynamic table and add a click event for each cell _ javascript tips

This article describes how to use javascript to generate a dynamic table and add click events for each cell. For more information, see html:

The Code is as follows:

Demo


Dynamic table:

Script:

The Code is as follows:

Script
Function getColumnDetail (column ){
Column. style. color = "blue"; // set the clicked cell to blue
Alert (column. innerHTML); // the content in the clicked cell is displayed.
}

Function setTable (trLineNumber, tdData ){
Var _ table = document. getElementById ("table ");
Var _ row;
Var _ cell;
For (var I = 0; I <trLineNumber; I ++ ){
_ Row = document. createElement ("tr ");
Document. getElementById ("table"). appendChild (_ row );
For (var j = 0; j <tdData. length; j ++ ){
_ Cell = document. createElement ("td ");
_ Cell. onclick = function () {getColumnDetail (this)}; // Add a click event for each cell
_ Cell. innerText = tdData [j];
_ Row. appendChild (_ cell );
}

}
}
Script

Call the setTable (trLineNumber, tdData) function to dynamically generate a table and set a click event for each cell. After the event is triggered, the content of the clicked cell is displayed, and the data becomes blue.