Today, I encountered a problem when I tried to dynamically add multiple rows of data to a table. I first defined a table:
Copy codeThe Code is as follows:
<Table>
<Thead>
</Thead>
<Tbody id = "filelist">
</Tbody>
</Table>
Perform the following operations in JavaScript:
Copy codeThe Code is as follows:
For (var I in entries ){
...
Var filetable = document. getElementById ('filelist ');
Filetable. innerHTML + = '<tr> <td> 111 </td> <td> 222 </td> </tr> ';
}
There is no problem in doing this in FireFox, but it will not work if I put it under IE. I asked my colleagues and searched for it. I found COL, COLGROUP, FRAMESET, HTML, STYLE in IE, the innerHTML attributes of TABLE, TBODY, TFOOT, THEAD, TITLE, and TR elements are read-only and cannot be operated directly. However, there is no solution. The innerHTML of TD can still be operated. The above code can be modified as follows:
Copy codeThe Code is as follows:
For (var I in entries ){
...
Var filetable = document. getElementById ('filelist ');
Var tr = document. createElement ('tr ');
Var td1 = document. createElement ('td ');
Td1.innerHTML = '20140901 ';
Var td2 = document. createElement ('td ');
Td2.innerHTML = '20140901 ';
Tr. appendChild (td1 );
Tr. appendChild (td2 );
Filetable. appendChild (tr );
}
You can first use the createElement method of DOM to create tr and td, then perform corresponding operations on the innerHTML of td, and finally add the created elements to the DOM tree using the appendChild method. In this way, you can run normally in IE. Note that if your table does not have a tbody, it is like this:
<Table id = "filelist"> </table>
At this time, you cannot directly use the appendChild method for the table, because the table element in IE6 does not support the appendChild method (IE8 seems to be supported ).
Some people have suggested using insertRow () and other methods on the Internet, but this method is also compatible with different browsers (insertRow (-1) is required in FireFox )), so it's useless.
BTW, although I have consciously read a lot of JS materials before, but I still have some practical insights. Now I am beginning to be confused and learn calmly. ING