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 相关文章推荐
javascript中的location用法简单介绍
Mar 07 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
Aug 02 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
bootstrap是什么_动力节点Java学院整理
Jul 14 Javascript
详解tween.js的使用教程
Sep 14 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 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基础知识:控制结构
2006/12/13 PHP
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
PHP过滤★等特殊符号的正则
2014/01/27 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
CI框架的安全性分析
2016/05/18 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
jQuery实现给页面换肤的方法
2015/05/30 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
详解C++编程中一元运算符的重载
2016/01/19 Python
pycharm设置注释颜色的方法
2018/05/23 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
详解python:time模块用法
2019/03/25 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
python3 xpath和requests应用详解
2020/03/06 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
用 python 进行微信好友信息分析
2020/11/28 Python
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
德国购买门票网站:ADticket.de
2019/10/31 全球购物
C# Debug和Testing相关面试题
2015/10/25 面试题
地震捐款倡议书
2014/08/29 职场文书
骨干教师申报材料
2014/12/17 职场文书
初中作文评语集锦
2014/12/25 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL