js操作table示例(个人心得)


Posted in Javascript onNovember 29, 2013

记得以前面试的时候遇到过这样一个问题:有一个表格,然后有4个输入框,一个合并按钮,输入框是这样的,从第几行到第几行,从第几列到第几列,然后点击按钮,合并 。当时我从学校出来,js知识只是知道一些,根本做不到!现在想想,其实这个问题也还是考基础功夫是否扎实!大家有兴趣可以自己做做看,测下自己是不是能够做出来。题目的截图:
js操作table示例(个人心得) 
现在做这个问题,看起来简单,但我还是花了很长时间,可能是我的思路不对吧?主要就是用js来操作html,我现在实现了添加行,删除行,添加列,删除列 ,但合并单元格却不能完整的实现 ,主要是表格会乱掉 。现在把这个问题发出来,有兴趣的同仁可以自己在有空的时候研究下,看自己能不能做出来!主要是合并单元格的问题!也可以帮我看看合并单元格的问题。

我自己实现的部分代码:
html部分 写道

<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>

生成表格,采用appendChild 写道
function init(){ 
_table=document.getElementById ("table"); 
_table.border="1px"; 
_table.width="800px"; for(var i=1;i<10;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); 
 } 
}

添加行,使用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); 
}

添加行的另一种方法insertRow 写道
function addRow_withInsert(){ 
 varrow=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) 写道
/*删除行,采用deleteRow(row Index)*/ 
function removeRow(){ 
/* var row=document.getElementById("2"); 
var index=row.rowIndex; 

alert(index);*/ 

 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(列位置)的方法 写道
/*删除列,采用deleteCell(列位置)的方法*/ 
function removeCell(){ 
for(var i=0;i<document.getElementById("table").rows.length;i++){ 


document.getElementById("table").rows[i].deleteCell(0); 

} 
}

合并单元格(未实现) 写道
我的代码有问题,主要是表格会乱掉,一直没有改好 :
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; 
}
Javascript 相关文章推荐
alixixi runcode.asp的代码不错的应用
Aug 08 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
javascript面向对象之对象的深入理解
Jan 13 Javascript
JavaScript日期时间与时间戳的转换函数分享
Jan 31 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 Javascript
vue-router懒加载速度缓慢问题及解决方法
Nov 25 Javascript
js指定日期增加指定月份的实现方法
Dec 19 Javascript
npm的lock机制解析
Jun 20 Javascript
微信小程序自定义单项选择器样式
Jul 25 Javascript
vue+element 实现商城主题开发的示例代码
Mar 26 Javascript
css配合jquery美化 select
Nov 29 #Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 #Javascript
JS实现多物体缓冲运动实例代码
Nov 29 #Javascript
JS实现匀速运动的代码实例
Nov 29 #Javascript
JS实现侧悬浮浮动实例代码
Nov 29 #Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 #Javascript
JS实现日期加减的方法
Nov 29 #Javascript
You might like
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
php数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
js数组依据下标删除元素
2015/04/14 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
vuex 使用文档小结篇
2018/01/11 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
python在每个字符后添加空格的实例
2018/05/07 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
Schutz鞋官方网站:Schutz Shoes
2017/12/13 全球购物
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
银行员工职业规划范文
2014/01/21 职场文书
物理教育专业求职信
2014/06/25 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
钢琴师观后感
2015/06/12 职场文书
爱护环境建议书
2015/09/14 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
数据库之SQL技巧整理案例
2021/07/07 SQL Server
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers