JavaScript动态创建table表格

JavaScript动态创造table表格

介绍:

原来的table都以友好写好的,大家让在body标签中不写,让它通过JavaScript中的代码生成:

方法一:

最原始的方法,创设黄金时代一成分
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<=0 || isNaN(row) ){
    alert(输入的行号错误,不能创建表格,请重新输入:);
    return;
   }
   var cols=parseInt(document.getElementsByName(cols1)[0].value);
   if(isNaN(cols) || cols<=0){
    alert(输入的列号错误,不能创建表格,请重新输入:);
    return;
   }
   //上面确定了 现在开始创建
   for(var x=0;x 删除行: 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 <= tab.rows.length) {
    tab.deleteRow(rows-1);
    }else{
     alert(删除的行不存在!!);
     return ;
    }

  }

删除列:

//删除列要麻烦些, 要通过行来进行删除
  // 一行的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完整的代码:

<script type=text/javascript> var tableNode; function createTable(卡塔尔(قطر‎{ tableNode=document.createElement(table卡塔尔(قطر‎;//获得对象 tableNode.setAttribute(id,table卡塔尔 var row=parseInt(document.getElementsByName(row1卡塔尔国[0].value卡塔尔;//获得行号 //alert(rowState of Qatar; if(row<=0 || isNaN(row卡塔尔国 卡塔尔(قطر‎{ alert(输入的行号错误,不可能创制表格,请重新输入:卡塔尔国; return; } var cols=parseInt(document.getElementsByName(cols1卡塔尔国[0].value卡塔尔; if(isNaN(cols卡塔尔国 || cols<=0卡塔尔国{ alert(输入的列号错误,不能够成立表格,请重新输入:卡塔尔国; return; } //上面明显了 今后上马创办 for(var x=0;x= 1 && rows <= tab.rows.length卡塔尔(قطر‎ { tab.deleteRow(rows-1卡塔尔; }else{ alert(删除的行空中楼阁!!卡塔尔(قطر‎; return ; } } //删除列要麻烦些, 要通过行来打开删除 // 少年老成行的cells的尺寸便是列的个数 //tab.rows[x].deleteCell(cols-1) function delCols(State of Qatar{ //获得table对象 var tab=document.getElementById(table卡塔尔国; if(tab==null卡塔尔{ alert(删除的表官样文章!!卡塔尔; return ; } //得到文本框里面包车型客车剧情 var cols=parseInt(document.getElementsByName(delcols1卡塔尔国[0].value卡塔尔; //检查是还是不是可相信 if(isNaN(cols卡塔尔国卡塔尔国{ alert(输入不得法。请输入要出口的列。。State of Qatar; return; } if(!(cols>=1 && cols 列:

 

功效演示:

图片 1图片 2图片 3图片 4

 

 

 

 

 

介绍: 原先的table都是和睦写好的,我们让在body标签中不写,让它通过JavaScript中的代码生成: 方法后生可畏: 最原始...

本文由js9905com金沙网站-金沙澳门手机版网址发布于计算机,转载请注明出处:JavaScript动态创建table表格

您可能还会对下面的文章感兴趣: