（9）动态创建表格、动态删除行列

来源：互联网发布：淘宝质量好的女装店编辑：程序博客网时间：2024/05/21 06:19

一、点击按钮创建5行6列的表格，原始方式：创建节点添加节点方法

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">    table  {      border:#0FC 1px solid;      width:600px;      border-spacing:0px;/*单元格之间的距离*/  }  table td  {      border:#000 1px solid;      width:100px;      padding:0px;  }</style></head><body>         <!--在页面中床架一个五行六列的表格         1：事件源，比如按钮         2：必须有一个生成表格节点的存储位置         -->         <script type="text/javascript">           function creTable()           {               //1,创建表格节点               var oTabNode=document.createElement("table");               //2.创建tbody节点               var oTbdNode=document.createElement("tbody");               for(var x=0;x<5;x++)                { //3,创建tr节点                      var oTrNode=document.createElement("tr");                       //4，创建td节点                       for(var i=0;i<6;i++)//6列                       {                          var oTdNode=document.createElement("td");                          oTdNode.innerHTML="这是单元格";                          //tr中添加td                          oTrNode.appendChild(oTdNode);                       }                       //tb中添加tr                       oTbdNode.appendChild(oTrNode);                }                       //table中添加tb                       oTabNode.appendChild(oTbdNode);                       //div中添加tab                       document.getElementsByTagName("div")[0].appendChild(oTabNode);           }         </script>         <input type="button" value="创建表格" onclick="creTable()"/>         <hr/>         <div></div></body></html>

二、利用DHTML节点对象思想创建表格

 function creTable(x,y)           {               //既然是操作表格，则使用表格节点独享的方法来完成                var oTabNode=document.createElement("table");               for(var i=0;i<x;i++)                 {  //表格的下层是行tr,要创建tr,则查看表格方法                    var oTrNode=oTabNode.insertRow();                    for(var j=0;j<y;j++)                    {                        //tr的下层是td，要创建td,则查看tr:在表格行tr中创建单元格，并将单元格添加到cells中                        var oTdNode=oTrNode.insertCell();//完成创建和添加操作                        oTdNode.innerHTML="这是一个单元格";                    }                 }//将表格节点谈价到div中                    document.getElementsByTagName("div")[0].appendChild(oTabNode);                 //若想只创建一次表格，则可以用button中的方法：disabled：设置或者获取控件的状态                 document.getElementsByTagName("input")[0].disabled=true;            }

三、创建用户自定义的行数和列数

function creTable()           {               //既然是操作表格，则使用表格节点独享的方法来完成               //获取行数和列数,将字符串转换为整数               var x=parseInt（document.getElementsByName("line")[0].value）;               var y=parseInt(document.getElementsByName("row")[0].value);                var oTabNode=document.createElement("table");               for(var i=0;i<x;i++)                 {  //表格的下层是行tr,要创建tr,则查看表格方法                    var oTrNode=oTabNode.insertRow();                    for(var j=0;j<y;j++)                    {                        //tr的下层是td，要创建td,则查看tr:在表格行tr中创建单元格，并将单元格添加到cells中                        var oTdNode=oTrNode.insertCell();//完成创建和添加操作                        oTdNode.innerHTML="这是一个单元格";                    }                 }//将表格节点谈价到div中                    document.getElementsByTagName("div")[0].appendChild(oTabNode);                 //若想只创建一次表格，则可以用button中的方法：disabled：设置或者获取控件的状态                 document.getElementsByName("cli")[0].disabled=true;            }         </script>         表格行数<input type="text" name="line" value=""/><br/>         表格列数<input type="text" name="row" value=""/><br/>                <input type="button" name="cli" value="点击创建表格" onclick="creTable()"/>         <hr/>         <div></div></body></html>

四、删除行和列

 function delRow()           {               //获取表格               var TabNode=document.getElementById("Tabid");               if(TabNode==null)               {                   alert("表格不存在");                   return;//就不用执行以下的代码了               }               var delRowNum=document.getElementsByName("delRow")[0].value;               if(delRowNum>=1 && delRowNum<=TabNode.rows.length)                {                     TabNode.deleteRow(delRowNum-1);                }                else                {                   alert("要删除的行不存在啊，请重新设定要删除的行");                }           }           //思想：删除列，就是删除每一行中的同一个单元格          function delCol()           {               //获取表格，并判断表格是否存在               var TabNode=document.getElementById("Tabid");                if(TabNode==null)               {                   alert("表格不存在");                   return;//就不用执行以下的代码了               }               var delCellNum=document.getElementsByName("delCol")[0].value;                if(delCellNum>=1 && delCellNum<=TabNode.rows[0].cells.length)                {                    //要删除每一行的这一列                    for(var i=0;i<TabNode.rows.length;i++)                    {                        TabNode.rows[i].deleteCell(delCellNum-1);                    }                }                else                {                    alert("要删除的列不存在啊，请重新设定要删除的列");                }           }         </script>         表格行数<input type="text" name="line" value=""/><br/>         表格列数<input type="text" name="row" value=""/><br/>                <input type="button" name="cli" value="点击创建表格" onclick="creTable()"/>         <hr/>         要删除的行<input type="text" name="delRow" value=""/>         <input type="button" name="delRowCli" value="删除此行" onclick="delRow()"/><br />         要删除的列<input type="text" name="delCol" value=""/>         <input type="button" name="delColCli" value="删除此列" onclick="delCol()"/>         <hr/>         <div></div></body></html>

阅读全文

0 0