How to dynamically create a table in JavaScript _ javascript skills

This article mainly introduces how to dynamically create a table in JavaScript, and sometimes needs to dynamically create and Delete tables. The next article will introduce how javascript is implemented, if you are interested, do not miss out on the two methods for dynamically creating table tables using JavaScript. The specific implementation is as follows:

Method 1:The original method creates one-to-one elements.

Var a1 = document. createElement ("table"); var a2 = document. createElement ("tbody"); var a3 = document. createElement ("tr"); var a4 = document. createElement ("td"); // start appendchild () to append each element a3.appendChild (a4); a2.appendChild (a3); a1.appendChild (a2 );

Method 2: Use the functions contained in the table object to insert rows and columns.

Var tabNode = document. createElement ("table"); var trNode = tabNode. insertRow (); var tdNode = trNode. insertCell; tabNode. innerHTML = "this is created using functions in the table object" NOTE: When using the original method, a tbody object must be added when createElement is created. // obtain
 
 
  
  
The sibling node of the label // var node3 = tabnode. previussibling; // The previous node obtains the reference of the previous sibling object of this object. // Alert ("previous -- node3:" + node3); // # text // If
 
 
 
 
  
  
There is a carriage return character later. Later versions of IE and Firefox will be recognized as "blank text" # text, // while earlier versions of IE will be directly crossed.
 
 
 
 
  
  
Node. The same is true for other nodes. // table,
 
 
Dynamic Creation and deletion:
Create a table by entering the following values:

 
Function createTable () {tableNode = document. createElement ("table"); // obtain the tableNode object. setAttribute ("id", "table") var row = parseInt (document. getElementsByName ("row1") [0]. value); // get the row number // alert (row); if (row <= 0 | isNaN (row) {alert ("the input row number is incorrect and cannot be created, enter "); return;} var cols = parseInt (document. getElementsByName ("cols1") [0]. value); if (isNaN (cols) | cols <= 0) {alert ("the entered column number is incorrect. You cannot create a table. Please enter it again:"); return ;} // The preceding figure shows how to create for (var x = 0; x
    
     

     
Delete row:

     

     
Function delRow () {// to delete a row, you must obtain the table object to delete the row. Therefore, you must set the table Object id when creating the table object to facilitate the var tab = document operation. getElementById ("table"); // obtain the table object if (tab = null) {alert ("the deleted table does not exist! ") Return;} var rows = parseInt (document. getElementsByName ("delrow1") [0]. value); // obtain the object to be deleted if (isNaN (rows) {alert ("the input row is incorrect. Enter the row to be deleted... "); Return;} if (rows >=1 & rows <= tab. rows. length) {tab. deleteRow (rows-1);} else {alert ("the row to be deleted does not exist !! "); Return ;}}
     

     
Delete column:

     

     
// It is troublesome to delete a column. You need to delete the cells in a row through the rows. // the length of a row is the number of columns. // tab. rows [x]. deleteCell (cols-1) function delCols () {// obtain the table object var tab = document. getElementById ("table"); if (tab = null) {alert ("the deleted table does not exist !! "); Return;} // get the content var cols = parseInt (document. getElementsByName ("delcols1") [0]. value); // check for reliability if (isNaN (cols) {alert ("the input is incorrect. Enter the columns to output .. "); Return;} if (! (Cols> = 1 & cols
      
       

       
Complete code:

       

       
     CreateTable2.html    
      
    
 
  
  
Labels and
  
  
     There is actually a hidden 
   
    Tag ---- table body