JavaScript动态操作表格实例(添加,删除行,列及单元格)
更新时间：2013年11月25日 10:29:34 作者：
这篇文章主要是对JavaScript动态操作表格实例(添加,删除行,列及单元格)进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
复制代码 代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>js动态操作表格</title>
<script language="javascript">
function init(){
_table=document.getElementById("table");
_table.border="1px";
_table.width="800px";
for(var i=1;i<6;i++){
var row=document.createElement("tr");
row.id=i;
for(var j=1;j<6;j++){
var cell=document.createElement("td");
cell.id=i+"/"+j;
cell.appendChild(document.createTextNode("第"+cell.id+"列"));
row.appendChild(cell);
}
document.getElementById("newbody").appendChild(row);
}
}
function rebulid(){
var beginRow=document.getElementById("beginRow").value;/*开始行*/
var endRow=document.getElementById("endRow").value;/*结束行*/
var beginCol=document.getElementById("beginCol").value;/*开始列*/
var endCol=document.getElementById("endCol").value;/*结束列*/
var tempCol=beginRow+"/"+beginCol;/*定位要改变属性的列*/
alert(tempCol);
var td=document.getElementById(tempCol);
for(var x=beginRow;x<=endRow;x++){
for(var i=beginCol;i<=endCol;i++){
if(x==beginRow){
document.getElementById("table").rows[x].deleteCell(i+1);
}
else{
document.getElementById("table").rows[x].deleteCell(i);
}
}
}
td.rowSpan=(endRow-beginRow)+1;
}
/*添加行，使用appendChild方法*/
function addRow(){
var length=document.getElementById("table").rows.length;
/*document.getElementById("newbody").insertRow(length);
document.getElementById(length+1).setAttribute("id",length+2);*/
var tr=document.createElement("tr");
tr.id=length+1;
var td=document.createElement("td");
for(i=1;i<4;i++){
td.id=tr.id+"/"+i;
td.appendChild(document.createTextNode("第"+td.id+"列"));
tr.appendChild(td);
}
document.getElementById("newbody").appendChild(tr);
}
function addRow_withInsert(){
var row=document.getElementById("table").insertRow(document.getElementById("table").rows.length);
var rowCount=document.getElementById("table").rows.length;
var countCell=document.getElementById("table").rows.item(0).cells.length;
for(var i=0;i<countCell;i++){
var cell=row.insertCell(i);
cell.innerHTML="新"+(rowCount)+"/"+(i+1)+"列";
cell.id=(rowCount)+"/"+(i+1);
}
}
/*删除行，采用deleteRow(row Index)*/
function removeRow(){
document.getElementById("newbody").deleteRow(document.getElementById(document.getElementById("table").rows.length).rowIndex);
}
/*添加列，采用insertCell(列位置)方法*/
function addCell(){
/*document.getElementById("table").rows.item(0).cells.length
用来获得表格的列数
*/
for(var i=0;i<document.getElementById("table").rows.length;i++){
var cell=document.getElementById("table").rows[i].insertCell(2);
cell.innerHTML="第"+(i+1)+"/"+3+"列";
}
}
/*删除列，采用deleteCell(列位置)的方法*/
function removeCell(){
for(var i=0;i<document.getElementById("table").rows.length;i++){
document.getElementById("table").rows[i].deleteCell(0);
}
}
</script>
</head>
<body onLoad="init();">
<table id="table" align="center">
<tbody id="newbody"></tbody>
</table>
<div>
<table width="800px" border="1px" align="center">
<tr><td align="center"><input type="button" id="addRow" name="addRow" onClick="addRow();" value="添加行"/></td><td align="center"><input type="button" id="delRow" name="delRow" onClick="removeRow();" value="删除行"/></td></tr>
<tr><td align="center"><input type="button" id="delCell" name="delCell" onClick="removeCell();" value="删除列"/></td><td align="center"><input type="button" id="addCell" name="addCell" onClick=" addCell();" value="添加列"/></td></tr>
<tr><td align="center" colspan="2"><input type="button" id="addRows" name="addRows" onClick="addRow_withInsert();" value="添加行"/></td></tr>
</table>
</div>
<div>
<table width="800px" border="1px" align="center">
<tr><td>从第<input type="text" id="beginRow" name="beginRow" value=""/>行到<input type="text" name="endRow" id="endRow" value=""/>行</td><td rowspan="2" id="test"><input type="button" name="hebing" id="hebing" value="合并" onClick="rebulid();"/></td></tr>
<tr><td>从第<input type="text" name="beginCol" id="beginCol" value=""/>列到<input type="text" name="endCol" id="endCol" value=""/>列</td></tr>
</table>
</div>
</body>
</html>
相关文章
很多网站都有此功能，当浏览到底部时都会有一个打印按钮，点击打印按钮就可以完成打印功能，功能非常不错，人性化，下面通过本文给大家介绍JavaScript实现点击按钮就打印的代码，需要的朋友参考下2016-01-01
浅谈JS for循环中使用break和continue的区别
这篇文章主要介绍了浅谈for循环中使用break和continue的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了js创建一个input数组并绑定click事件的方法,需要的朋友可以参考下2014-06-06
这篇文章介绍了JS对日期格式的验证实例，有需要的朋友可以参考一下2013-06-06
这篇文章主要介绍了js子页面如何获取父页面数据,需要的朋友可以参考下2014-05-05
因项目开发需要，须将每一个方法都独立成单独的js文件以便载入、维护，所以，必须需要有一个控制器用于载入这些方法。2010-07-07
javascript中的Base64、UTF8编码与解码详解
本文给大家介绍的是javascript中的Base64、UTF8编码与解码的函数源码分享以及使用范例，十分实用，推荐给小伙伴们，希望大家能够喜欢。2015-03-03
各种音乐播放器上都有一个自动滚动播放歌词的功能，当前滚动到的歌词会高亮居中显示，即使歌词被换行也能正常居中，那么这个功能基于JavaScript怎么实现让歌词滚动播放呢？感兴趣的朋友一起看看吧2015-11-11
这篇文章主要介绍了如何基于js判断浏览器版本,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
下面小编就为大家分享一篇js将键值对字符串转为json字符串的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
最新评论