码迷,mamicode.com
首页 > 其他好文 > 详细

示例-创建表格-指定行列&删除表格的行和列

时间:2014-06-12 07:32:21      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:java   ext   get   使用   javascript   html   

<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

示例-创建表格-指定行列&删除表格的行和列

标签:java   ext   get   使用   javascript   html   

原文地址:http://www.cnblogs.com/aineko/p/3782706.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!