JS @ DOM: dynamically add row display information to the table to achieve scrolling. js @ dom table

JS @ DOM: dynamically add row display information to the table to achieve scrolling. js @ dom table

Recently, I learned about D3 and used tables most of the time, and dynamically added and deleted tables in js. Here I will summarize the operations on tables in js:

First, you must know that js does not provide column-related operations. Therefore, column-related operations can only be implemented through row operations, such as obtaining the number of columns, you can only obtain the number of columns by getting the number of cells in the row. (this is also a defect. If a cell is set with the colspan attribute, an error occurs ).

Table. rows. length // obtain the number of rows in the table. rows [0]. cells. length // obtain the number of cells in the first row of the table. insertRow (I) // insert row (I + 1). The number of rows (parameter) starts from scratch tr. insertCell (I) // Insert the cell (I + 1). The parameter starts from scratch.

There are also some uncommon methods. See the tutorial in w3school: html dom Table object;

Thanks to the simple example provided by the showbo Moderator: display information to the row in the table, with a maximum of 10 rows displayed. If there are more than 10 rows, delete the top row (Scroll display information ):

<Input type = "button" onclick = "addRow () "value =" Add new rows "/> <br/> <table id =" tb "border =" 1 "> </table> <script> var total = 0; // for testing, the reference function addRow () {var tb = document is deleted by the actual application. getElementById ('tb'), l = tb. rows. length; var tr = tb. insertRow (l); var td = tr. insertCell (0); td. innerHTML = 'xxxxxx' + total; // displayed content. If multiple cells exist, continue tr. insertCell (1), note that the parameter is from 0 if (l> = 10) {// more than 10 rows, delete the first row tr = tb. rows [0]; tr. parentNode. removeChild (tr);} total ++;} </script>