（9）动态创建表格、动态删除行列
一、点击按钮创建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="点击创建表格" οnclick="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="点击创建表格" οnclick="creTable()"/>
<hr/>
要删除的行<input type="text" name="delRow" value=""/>
<input type="button" name="delRowCli" value="删除此行" οnclick="delRow()"/><br />
要删除的列<input type="text" name="delCol" value=""/>
<input type="button" name="delColCli" value="删除此列" οnclick="delCol()"/>
<hr/>
<div></div>
</body>
</html>
