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 相关文章推荐
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
jQuery getJSON 处理json数据的代码
Jul 26 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
Dec 13 Javascript
JS 修改URL参数(实现代码)
Jul 08 Javascript
Centos6.8下Node.js安装教程
May 12 Javascript
Jquery EasyUI $.Parser
Jun 02 jQuery
JS内部事件机制之单线程原理
Jul 02 Javascript
小程序实现多选框功能
Oct 30 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
Nov 14 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 Javascript
前端开发之便利店收银系统代码
Dec 27 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 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
解决控件遮挡问题:关于有窗口元素和无窗口元素
2007/01/28 PHP
php桌面中心(四) 数据显示
2007/03/11 PHP
php记录日志的实现代码
2011/08/08 PHP
php计算一个文件大小的方法
2015/03/30 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
关于vue里页面的缓存详解
2019/11/04 Javascript
基于Python的身份证号码自动生成程序
2014/08/15 Python
python 捕获shell脚本的输出结果实例
2017/01/04 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
简单的python后台管理程序
2017/04/13 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
Python subprocess库的使用详解
2018/10/26 Python
浅谈django 模型类使用save()方法的好处与注意事项
2020/03/28 Python
python requests.get带header
2020/05/05 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
python使用smtplib模块发送邮件
2020/12/17 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
季度思想汇报
2014/01/01 职场文书
学校安全责任书
2014/04/14 职场文书
课外访万家心得体会
2014/09/03 职场文书
tomcat默认最大连接数及相关调整方法
2022/05/06 Servers