How JavaScript dynamically creates table tables _javascript tips

Two kinds of JavaScript dynamic creation table Table method, share to everyone, specifically implemented as follows

method One: The most primitive way to create one by one elements

var a1=document.createelement ("table");

var a2=document.createelement ("Tbody");

var a3=document.createelement ("tr");

var a4=document.createelement ("TD");

Start AppendChild () append each element

A3.appendchild (A4);

A2.appendchild (A3);

A1.appendchild (A2); 

Method Two: Insert rows and insert columns using the functions contained in the Table object:

var tabnode=document.createelement ("table");

var trnode=tabnode.insertrow ();

var Tdnode=trnode.insertcell;

Tabnode.innerhtml= "This is created using the functions inside the Table object."
Note: Using the original method, createelement time, you must add a Tbody object
//Get <table> Tag's sibling node

//var node3=tabnode.previoussibling;//the previous node gets a reference to the previous sibling object for this object.

//Alert ("Previous--node3:" +node3)//#text

///If a carriage return is followed by a <table>, a high version of IE and Firefox will be recognized as "blank text" #text,

// and the lower version of IE will be directly over the-----not only <table> nodes, other nodes are

the same//table,<table> tags and <tr> tags in the middle, in fact, there is a <tbody> Label----form Body

Dynamic creation and deletion:
Create the table by entering the value:

function CreateTable () { 
    tablenode=document.createelement ("table");//Get Object 
   tablenode.setattribute ("id", " Table ") 
   var row=parseint (document.getelementsbyname (" Row1 ") [0].value);//Get line number 
   //alert (row); 
   if (row<=0 | | isnan (ROW)) { 
    alert ("The line number entered is wrong, you cannot create the table, please re-enter:"); 
    return; 
   } 
   var cols=parseint (Document.getelementsbyname ("cols1") [0].value); 
   if (isNaN (cols) | | | cols<=0) { 
    alert ("Input column number error, cannot create TABLE, please re-enter:"); 
    return; 
   } 
   It's OK to start creating for 
   (Var x=0;x<row;x++) { 
    var trnode=tablenode.insertrow () now; 
    for (Var y=0;y<cols;y++) { 
     var tdnode=trnode.insertcell (); 
     Tdnode.innerhtml= "Cell" + (x+1) + "-" + (y+1); 
    } 
   } 
   document.getElementById ("Div1"). AppendChild (Tablenode);//Add to that location 
  

Delete Row:

function Delrow () { 
  //To delete a row, you must get a Table object to delete it, so you must set the ID of the Table object when you create it. Easy to manipulate 
  var Tab=document.getelementbyid (" Table ")//Gets 
  The Tables object if (tab==null) { 
   alert (deleted) does not exist! ") return 
   ; 
  var rows=parseint (Document.getelementsbyname ("Delrow1") [0].value);//Get the object to be deleted 
  if (isNaN (rows)) { 
   alert (" The line entered is not correct. Please enter the line to delete ... "); 
   return; 
  } 
  if (rows >= 1 && rows <= tab.rows.length) { 
   tab.deleterow (rows-1); 
   } else{ 
    alert ("Deleted row does not exist!!") "); 
    return; 
   } 
   
  

To delete a column:

Delete Column to be troublesome, to delete by row 
  //Line cells length is the number of columns 
  //tab.rows[x].deletecell (cols-1) 
  function Delcols () { 
   // Gets the Table object 
   var tab=document.getelementbyid ("table"); 
    
   if (tab==null) { 
    alert ("Deleted table does not exist!! "); 
    return; 
   } 
   Get the content inside the text box 
   var cols=parseint (document.getelementsbyname ("delcols1") [0].value); 
   Check for reliable 
   if (isNaN (cols)) { 
    alert ("Incorrect input.") Please enter a column to output ... "); 
    return; 
   } 
   if (!) ( Cols>=1 && cols<tab.rows[0].cells.length)) { 
    alert ("The line you want to delete does not exist!! "); 
    return; 
   } 
   for (Var x=0;x<tab.rows.length;x++) {///All Rows 
    Tab.rows[x].deletecell (cols-1); 
   } 
  } 

Complete code:

<! DOCTYPE html>  

Effect Demo:

The above is for you to share the two kinds of JavaScript dynamic creation Table Table method, I hope you like.