JavaScript study notes (2) Use DOM to write browser-compatible Table operations

If you want to dynamically operate the Table, you must be familiar with the DOM. If you want to achieve browser compatibility, you must be familiar with the W3C standards and the characteristics of each browser in table operations. Table is the best choice for data display today. DOM has specially added some features and methods for Table, which helps us write simpler and more efficient programs.

Note: The program in this article was tested under IE7 and Firefox3.

Procedure 1: Dynamically create a table

13 ; ,"tableStyle");
18 tableNode .setAttribute("border",1);             for(var j = 0; j < cellCount; j++){
23 var newCell = newRow.insertCell(0);
24 newCell.innerHTML = Number(i+1) + "×" + Number(j+1);
25            }
26}
27 document.body.appendchild (tablenode);
28}
This function is very simple: 14 lines use the document.createElement () method to create a Table label. At this step, we have not encountered the place where you need to pay attention, because Most browsers support this method. In lines 16-18, we use the setAttribute() method to add attributes to the newly created table tag. Although these lines of code can be parsed by IE and FF, the book "JavaScript Advanced Programming" points out:
IE is using the setAttribute() method. There is a big problem, when you use it, changes will not always be reflected correctly. If you plan to support IE, it is best to use attributes whenever possible. What the master says always makes sense, so we can use attributes instead of methods. Fortunately, FireFox also provides support for attributes, so we can modify the program as follows:
1 tableNode.id = "tableNode";
2 tableNode.className = "tableStyle";
3 tableNode.border = "1"; The only thing to note is that when setting the class of the table, className must be used.
The insertRow() used in line 21 and the insertCell() used in line 23 are both special APIs provided by DOM for Table. The corresponding methods are deleteRow() and deleteCell(). When using these two methods, we should pay close attention to them. : IE provides the default parameter -1 for both methods, but FireFox does not provide parameters for them, so if there are no parameters, it can run normally under IE, but not under FireFox. So we should take care to always provide parameters to these two methods. In layman's terms, the meaning of the parameters of these two functions can be explained like this:
0: Put the new row on top of the existing row-------Always set the latest row index (rowIndex) to 0
-1: Place the newly created row below the existing row -------The row index is incremented, starting from 0
You can also set this parameter manually, but when the set parameter is greater than the row index of the current table + 1, the program will Report an error. insertCell() has similar meaning, no need to repeat!

Program 2: Insert new lines before and after the specified line

9                                                 alert("Look The table to be operated is not reached");
10                                                                                                                                                        //Find the specified row
14 through the row index if( Number(indexOfRow - 1) <= tableNode.rows.length){
15                       var tableRow = tableNode.rows[indexOfRow-1]; 
16                       var tableRow = tableNode.rows[tableNode.rows.length- 1 ]; //Insert a new line before the specified line
22 If(position == 1 ){
23                  tableRow.parentNode.insertBefore(newRow,tableRow);                   tableRow.parentNode.insertBefore(newRow,tableRow.nextSibling); 27
The rows used in line 15 of the program means that all rows in the table are returned an array, corresponding to cells: an array containing all cells in the table. Since it is an array containing all rows, we can naturally use the array index to get the value we want. The cloneNode() method used in line 20 is one of my favorite DOM methods. It allows us to target a specific HTML element. Perform deep (parameter is true) or shallow (parameter is false) copy. The so-called deep copy means returning a copy of the current element, which has the same special name as the original element. When we need to create a new element that is the same as an existing element (such as multiple file uploads), this method can help us save a lot of code. The so-called shallow copy means that only the skeleton of the element is copied without copying the specific name of the element. The meaning is difficult to express. You can set the parameters of the cloneNode() method of the above program to false to observe its effect.
The insertBefore() method used in line 23 is also very simple: insert the specified element in front of the current element. I often see people on the Internet saying why W3C doesn’t have insertAfter(). In fact, we just need to think about it in a different way. If the specified element is inserted in front of the next element of the current element, then the insertAfter() method will be implemented, hehe!

Program 3: Delete the specified row

1 /**
2                                                          */
5 function deleteTheRow(deleteRowIndex){
6 var tableNode = document.getElementById("tableNode");
7      var rowCount = tableNode.rows .length;
8
9 if(isNaN(deleteRowIndex) || parseInt(deleteRowIndex) < 1 || parseInt(deleteRowIndex) > Number(rowCount)){
10 alert(" Please enter a number greater than 0 and less than "+Number (rowCount)+"Number")
11                                                                                                                                                                 Easy to say, the main method used is deleteRow() , but be careful: the parameters passed in cannot be greater than the number of rows in the table, otherwise an error will be reported!

Program 4: Delete the specified cell

1 /**
2                                                                          */

7 var tableNode = document.getElementById("tableNode");

9     rowNode.deleteCell(Number(indexOfCell-1));
10   } Find the cell to be deleted using the provided row index and column index, and then call the deleteCell() method , and then the code to delete the specified column is similar to this. It is nothing more than looping through each row of the table, finding the specified column, and then deleting it.

The above are JavaScript study notes (2) using DOM to write browser-compatible Table operations. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!