JS Dynamic CREATE TABLE------Day59

Just do not know how, CSDN blog has been open, in the blog park to complete today's record, the results of the pro-shutdown, login, and found that good, and then spend a few more minutes to turn it, regardless of what is really care about, right when obsessive-compulsive disorder ...

The previous days recorded dynamic additions to a row of columns: InsertRow () and Insertcell (); Dynamic deletion of one column: DeleteRow () and Deletecell (); Select a line: This parameter is passed, which is the key to the implementation, But it's all based on one thing: there's a table. Let's take a note of how to create a table dynamically today:

In fact, in the beginning, I only thought of a method, although to finally find that this method is still relatively simple, like the dynamic addition of rows and columns, the integration is not a table it:

Take a look at the code you've written, and discover how it's generated: (Here's a tabletest div left on the HTML page)

1 window.onload=function createTable1 () {2     var table = document.createelement (' table '); 3 for     (var i = 0; i < 4; i++) {4      var row = Table.insertrow (); 5 for      (var j = 0; J < 2; J + +) {6       var cell = Row.insertcell (); 7       cel L.innerhtml = "Here is" +i + "line" + ', ' + j+ ' column "; 8      }9     }10     document.getElementById (' tabletest '). appendchild (table) ;     table.setattribute (' border ', ' 1 '); 12}

So look at the effects of the build:

Here you can see, he is the row from the bottom up, the right-to-left column, it means that after inserting a row, then insert the line, the column is inserted on the left, and then after the search from the Internet, there are a lot of ways, of course, there are many different applications, here simply write the other two ways:

1. Generating elements

Look at the code generation steps:

1  window.onload=function CreateTable2 () {2     var table = document.createelement (' table '); 3     var tbody = Document.createelement (' tbody ');  4 for     (var i = 0; i < 4; i++) {5      var tr = document.createelement (' tr '), 6 for      (var j = 0; J < 2; J + +) { 7       var td = Document.createelement (' TD '); 8       var inner = document.createTextNode ("This is" +i + "line" + ", ' + j+" column "); 9       Td.appendchild (inner);       Tr.appendchild (TD);      }12      tbody.appendchild (tr);     }14     Table.appendchild (tbody);     document.getElementById (' tabletest '). appendchild (table);     Table.setattribute (' Border ', ' 1 '); 17}

So look at the effect:

This is from the top to the bottom, from the left to the right of the generation of it, although the understanding of the simple, but the wording is also more troublesome.

2, array editing (stitching HTML language)

See the implementation steps of the code:

1 window.onload= function CreateTable4 () {2     var arr = new Array (); 3     arr.push (' <table border=1><tbody > ') 4 for        (var i = 0; i < 4; i++) {5            arr.push (' <tr> '), 6 for         (var j = 0; J < 3; J + +) {7             arr. Push (' <td> ' + ' here is ' + i + ' line ' + ', ' + j + ' column ' + ' </td> '); 8         }9         arr.push (' </tr> ');        }11        Arr.push (' </tbody><table> ');        document.getElementById (' tabletest '). InnerHTML = Arr.join (");    

At this point, look at the effect:

This is easier to understand, even if you change the array to string concatenation, we may understand more clearly, as in the HTML language to add the same, it is most easy to understand, but it is a bit verbose.

In fact, when you see the code, you really can understand how the implementation of the add, but the first to think of dynamic additions, but only think of the recent research methods, it is a bit less comprehensive. Today began filling, or a little afraid of filling ah, feel good horror ....

It took three minutes to write the blog in the garden to turn here, is a kind of practice, or a kind of sentimental, hey, sleep, it's a little late ...