JavaScript如何动态创建table表格_javascript技巧

程序员文章站 2022-05-15 11:56:43

...

两种JavaScript动态创建table表格的方法，分享给大家，具体实现如下

方法一：最原始的方法，创建一一元素

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

var a2=document.createElement("tbody");

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

var a4=document.createElement("td");

//开始appendchild()追加各个元素

a3.appendChild(a4);

a2.appendChild(a3);

a1.appendChild(a2);

方法二：利用table对象里面含有的函数：插入行和插入列

var tabNode=document.createElement("table");

var trNode=tabNode.insertRow();

var tdNode=trNode.insertCell;

tabNode.innerHTML="这是采用table对象里面的函数创建的"
注意：利用原始方法，一个个createElement时候，必须要添加一个tbody对象
//获取

标签的兄弟节点 // var node3=tabnode.previousSibling;//前一个节点获取对此对象的上一个兄弟对象的引用。 // alert("previous--node3:"+node3);//#text // 如果

后面有回车符，高版本的IE和火狐会识别成 “空白文本”#text， // 而低版本IE会直接越过-----不光是

节点，其它节点也一样 // 表格的,

标签和标签中间，其实还隐藏着一个标签----表格体

动态的创建和删除：
创建表格，通过输入的值：

function createTable(){ 
    tableNode=document.createElement("table");//获得对象 
   tableNode.setAttribute("id","table") 
   var row=parseInt(document.getElementsByName("row1")[0].value);//获得行号 
   //alert(row); 
   if(row

删除行：

function delRow(){ 
  //要删除行，必须得到table对象才能删除，所以在创建的时候必须要设置table对象的 id 方便操作 
  var tab=document.getElementById("table");//获得table对象 
  if(tab==null){ 
   alert("删除的表不存在！") 
   return; 
  } 
  var rows=parseInt(document.getElementsByName("delrow1")[0].value);//获得要删除的对象 
  if(isNaN(rows)){ 
   alert("输入的行不正确。请输入要删除的行。。。"); 
   return; 
  } 
  if (rows >= 1 && rows

删除列：

//删除列要麻烦些， 要通过行来进行删除 
  // 一行的cells的长度就是列的个数 
  //tab.rows[x].deleteCell(cols-1) 
  function delCols(){ 
   //获得table对象 
   var tab=document.getElementById("table"); 
    
   if(tab==null){ 
    alert("删除的表不存在！！"); 
    return ; 
   } 
   //获得文本框里面的内容 
   var cols=parseInt(document.getElementsByName("delcols1")[0].value); 
   //检查是否可靠 
   if(isNaN(cols)){ 
    alert("输入不正确。请输入要输出的列。。"); 
    return; 
   } 
   if(!(cols>=1 && cols

完整的代码：