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 相关文章推荐
JavaScript高级程序设计 阅读笔记(十七) js事件
Aug 14 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
May 27 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
Jun 01 Javascript
Jquery日历插件制作简单日历
Oct 28 Javascript
Javascript之Number对象介绍
Jun 07 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 Javascript
Antd下拉选择,自动匹配功能的实现
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
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
用JS写的一个TableView控件代码
2010/01/23 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
2015/12/08 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
浅谈Python由__dict__和dir()引发的一些思考
2017/10/30 Python
Python基于requests库爬取网站信息
2020/03/02 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
老师推荐信
2013/10/28 职场文书
酒店员工职业生涯规划
2014/02/25 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
实习单位鉴定意见
2015/06/04 职场文书
大学新生入学感想
2015/08/07 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书
Python打包为exe详细教程
2021/05/18 Python
Python上下文管理器Content Manager
2021/06/26 Python