<body>
<script type="text/javascript">
/*
*上面的方法和你麻烦。
*既然操作的是表格,
*那么最方便的方式就是使用表格节点对象的方法。
*
*表格是由行组成。表格节点对象中insertRow方法就完成了创建行并添加的动作。
*
*行是有单元格组成。通过tr节点对象的insertCell来完成。
*/
function
crtTable(){
var oTabNode =
document.createElement("table");
oTabNode.setAttribute("id","tabid");
var
rowVal = parseInt(document.getElementsByName("rownum")[0].value);
var
colVal =
parseInt(document.getElementsByName("celnum")[0].value);
for(var
x=1;x<=rowVal;x++){
var oTrNode =
oTabNode.insertRow();
for(var y =1;y<=colVal;y++){
var
oTdNode = oTrNode.insertCell();
oTdNode.innerHTML =
x+"---"+y;
}
}
//将表格节点添加到div中。
document.getElementsByTagName(‘div‘)[0].appendChild(oTabNode);
document.getElementsByName("crtBut")[0].disabled=true;
}
//删除行
function
delRow(){
//获取表格对象
var oTabNode =
document.getElementById("tabid");
if(oTabNode==null){
alert("表格不存在");
return;
}
//获取要删除的表格行数。
var
rowVal =
document.getElementsByName("delrow")[0].value;
if(rowVal>=1
&& rowVal<=
oTabNode.rows.length){
oTabNode.deleteRow(rowVal-1);
}else{
alert("要删除的行不存在");
}
}
//删除咧,其实就是删除每一行中同一位置的单元格。
function
delCol(){
//获取表格对象
var oTabNode =
document.getElementById("tabid");
if(oTabNode==null){
alert("表格不存在");
return;
}
//获取要删除的表格列数。
var
colVal =
document.getElementsByName("delcol")[0].value;
if(colVal>=1
&& colVal<=oTabNode.rows[0].cells.length){
for(var
x=0; x<oTabNode.rows.length;
x++){
oTabNode.rows[x].deleteCell(colVal-1);
}
}else{
alert("要删除的列不存在");
}
}
</script>
<input type="button" value="创建表格" name="crtBut"
onclick="crtTable()" />
行:<input type="text" name="rownum"
/>列:<input type="text" name="celnum"/>
<hr/>
<input type="text" name="delrow"/><input type="button" value="删除行"
onclick="delRow()"/>
<input type="text" name="delcol"/><input
type="button" value="删除列" onclick="delCol()"/>
<hr/>
<div></div>
</body>
示例-创建表格-指定行列&删除表格的行和列,布布扣,bubuko.com