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 相关文章推荐
js随机颜色代码的多种实现方式
Apr 23 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
Jan 22 Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 Javascript
node express使用HTML模板的方法示例
Aug 22 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
PHP面向对象概念
2011/11/06 PHP
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
2010/06/25 Javascript
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
JavaScript实现基于十进制的四舍五入实例
2015/07/17 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
Python学习笔记之os模块使用总结
2014/11/03 Python
基于Python闭包及其作用域详解
2017/08/28 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
Python3实现转换Image图片格式
2018/06/21 Python
基于python实现操作git过程代码解析
2020/07/27 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
心理健康课教学反思
2014/02/13 职场文书
大跃进口号
2014/06/16 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android