js操作html的table,包括添加行，添加列，删除行，删除列，合并单元格（未实现）

chenhua_1984

浏览: 1251920 次
性别:
来自: 杭州

最近访客更多访客>>

hy811014

jmi_hua

jin_config

大二三炮

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

js,jquery,json,xml,dom,html.regex

HTML 单元测试 Excel tinymce J#

记得以前面试的时候遇到过这样一个问题：有一个表格，然后有４个输入框，一个合并按钮，输入框是这样的，从第几行到第几行，从第几列到第几列，然后点击按钮，合并 。当时我从学校出来，js知识只是知道一些，根本做不到！现在想想，其实这个问题也还是考基础功夫是否扎实！大家有兴趣可以自己做做看，测下自己是不是能够做出来。题目的截图：

第1/1列	第1/2列	第1/3列	第1/4列	第1/5列
第2/1列	第2/2列	第2/3列	第2/4列	第2/5列
第3/1列	第3/2列	第3/3列	第3/4列	第3/5列
第4/1列	第4/2列	第4/3列	第4/4列	第4/5列
第5/1列	第5/2列	第5/3列	第5/4列	第5/5列
第6/1列	第6/2列	第6/3列	第6/4列	第6/5列
第7/1列	第7/2列	第7/3列	第7/4列	第7/5列
第8/1列	第8/2列	第8/3列	第8/4列	第8/5列
第9/1列	第9/2列	第9/3列	第9/4列	第9/5列

从第行到行
从第列到列

现在做这个问题，看起来简单，但我还是花了很长时间，可能是我的思路不对吧？主要就是用js来操作html，我现在实现了添加行，删除行，添加列，删除列 ，但合并单元格却不能完整的实现 ，主要是表格会乱掉 。现在把这个问题发出来，有兴趣的同仁可以自己在有空的时候研究下，看自己能不能做出来！主要是合并单元格的问题！也可以帮我看看合并单元格的问题。

　我自己实现的部分代码：

html部分写道

　　</tr>
　　<tr><td align="center"><input type="button" id="delCell"　name="delCell" onClick="removeCell();" 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 写道

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

动态生成table.rar (1.6 KB)
下载次数: 3021

分享到：

今天整整两年了 | ServletContextListener,Timer,TimerTask学 ...

2009-04-29 11:17
浏览 23749
评论(36)
论坛回复 / 浏览 (34 / 67638)
分类:Web前端
查看更多

16 楼 chenhua_1984 2009-06-02

　　其实合并单元格的这个功能我没有能够实现，也许是思路有问题，大家谁做到了请给个解决的办法!谢谢！

15 楼 chenhua_1984 2009-06-02

可维护型说的有道理，我在做这个的时候的确没有考虑这个问题！

14 楼 zbm2001 2009-06-02

liujunsong 写道

zbm2001 写道

liujunsong 写道

这种东西将来维护的时候会死人的.

怎么讲？
是楼主做的有问题？还是这种功能的实现本身就存在弊端？

能不能说清楚一点

多说两句吧.
……

晕，你就直接说楼主的代码封装存在问题，将来维护的时候会死人的。

我还以为你对是否需要这种功能存有质疑。

13 楼 liujunsong 2009-06-02

zbm2001 写道

liujunsong 写道

这种东西将来维护的时候会死人的.

怎么讲？
是楼主做的有问题？还是这种功能的实现本身就存在弊端？

能不能说清楚一点

多说两句吧.
我们在做软件开发的时候,脑子里面一定要有一个概念,就是说这个程序将来是需要有人维护的,而且这个人一般来说不会是开发者自己.所以在写程序的时候,一定要想想,自己写的是很爽,别人来维护这代码,是不是也很爽.
就说楼主写的这些功能吧,不错,确实实现了.
问题是,将来其他人维护的时候,是不是能够很容易上手看明白,很有把握的进行修改,升级呢?
上面这个问题的答案其实不难找,楼主可以在他们公司做个简单实验,随便找另外两个开发人员,然后看看能否用2天时间把这个事情完全移交出去.
为啥最多只能给两天时间呢,因为一个项目的代码是非常多的,如果仅仅一个功能点就要用两天才能掌握,那么掌握整个项目的时间就无穷无尽拖下去了...

在我自己的工作经验中,亲眼看到很多开发人员,写的东西别人看不懂,没法接手,最后要么自己被一个项目给困在那里不能动弹,要么一走了之以后这段代码就变成了死代码,没人看,没人管,最后被扔掉.

功能的实现仅仅是第一步,另外还要想想,这办法好吗,好用吗,以后能行吗?(仅仅是建议)

12 楼 huheng1234 2009-06-02

确实以后再维护的时候，麻烦啊~~

11 楼 xzj127 2009-06-02

用了几下。。感觉不是那么好。。很别扭。。

10 楼 zbm2001 2009-06-02

liujunsong 写道

这种东西将来维护的时候会死人的.

怎么讲？
是楼主做的有问题？还是这种功能的实现本身就存在弊端？

能不能说清楚一点

9 楼 liujunsong 2009-06-02

这种东西将来维护的时候会死人的.

8 楼少女杀手 2009-05-07

不错诶，在火狐上也能用！

7 楼 erlengleng 2009-05-05

只实现了一部分，ie8下测试的

6 楼 chenhua_1984 2009-05-04

如果哪位大哥对ＪＳ操作html合并单元格很熟悉的话，可以给一段实现的方式！谢谢

5 楼 chenhua_1984 2009-05-04

mingyuan0824 写道

在上个项目中，我倒是做出了合并和拆分单元格，就是模仿EXCEL的功能。

是用js操作html吗？

4 楼 chenhua_1984 2009-05-04

冯冀川写道

表格用div实现吧，这些所有的功能实现会方便一些

大哥，表格用DIV实现是怎么说的？

3 楼 mingyuan0824 2009-05-03

在上个项目中，我倒是做出了合并和拆分单元格，就是模仿EXCEL的功能。

2 楼冯冀川 2009-05-03

表格用div实现吧，这些所有的功能实现会方便一些

1 楼 chenhua_1984 2009-05-03

大家有谁作出合并单元格的这个功能吗？

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论