JavaScript动态操作表格实例(添加,删除行,列及单元格)


Posted in Javascript onNovember 25, 2013
<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 相关文章推荐
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
javascript中clipboardData对象用法详解
May 13 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
vuex的使用及持久化state的方式详解
Jan 23 Javascript
js实现固定区域内的不重叠随机圆
Oct 24 Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 #Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 #Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
Nov 25 #Javascript
js导入导出excel(实例代码)
Nov 25 #Javascript
用javascript添加控件自定义属性解析
Nov 25 #Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
Nov 25 #Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 #Javascript
You might like
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
js数组去重的5种算法实现
2015/11/04 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
在python中画正态分布图像的实例
2019/07/08 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
HTML5 Canvas渐进填充与透明实现图像的Mask效果
2013/07/11 HTML / CSS
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
戴森西班牙官网:Dyson西班牙
2020/02/04 全球购物
银行实习鉴定
2013/12/13 职场文书
干部鉴定材料
2014/05/18 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
党委干部批评与自我批评发言稿
2014/09/28 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL