js操作html的table,包括添加行，添加列，刪除行，刪除列，合并單元格（未實(shí)現(xiàn)）

luojingqing

記得以前面試的時(shí)候遇到過(guò)這樣一個(gè)問(wèn)題：有一個(gè)表格，然后有４個(gè)輸入框，一個(gè)合并 按鈕，輸入框是這樣的，從第幾行到第幾行，從第幾列到第幾列，然后點(diǎn)擊按鈕，合并 。當(dāng)時(shí)我從學(xué)校出來(lái)，js知識(shí)只是知道一些，根本做不到！現(xiàn)在想想，其實(shí)這個(gè)問(wèn)題也還是考基礎(chǔ)功夫是否扎實(shí)！大家有興趣可以自己做做看，測(cè)下自己是不是能夠做出來(lái)。題目的截圖：
第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列
從第 行到 行
從第 列到 列
   現(xiàn)在做這個(gè)問(wèn)題，看起來(lái)簡(jiǎn)單，但我還是花了很長(zhǎng)時(shí)間，可能是我的思路不對(duì)吧？主要就是用js來(lái)操作html，我現(xiàn)在實(shí)現(xiàn)了添加行，刪除行，添加列，刪除列 ，但合并單元格卻不能完整的實(shí)現(xiàn) ，主要是表格會(huì)亂掉 �，F(xiàn)在把這個(gè)問(wèn)題發(fā)出來(lái)，有興趣的同仁可以自己在有空的時(shí)候研究下，看自己能不能做出來(lái)！主要是合并單元格的問(wèn)題！也可以幫我看看合并單元格的問(wèn)題。
　我自己實(shí)現(xiàn)的部分代碼：
html部分 寫道



　　　　
　　
　　　　
　
從第 行到　　　 行
從第 列到 列
生成表格，采用appendChild 寫道
function init(){
_table=document.getElementById ("table");
_table.border="1px";
_table.width="800px";
for(var i=1;i
添加行，使用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
添加行的另一種方法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
刪除行，采用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
用來(lái)獲得表格的列數(shù)
*/
for(var i=0;i
刪除列，采用deleteCell(列位置)的方法 寫道
/*刪除列，采用deleteCell(列位置)的方法*/
function removeCell(){
for(var i=0;i
合并單元格（未實(shí)現(xiàn)） 寫道
我的代碼有問(wèn)題，主要是表格會(huì)亂掉，一直沒(méi)有改好 ：
function rebulid(){
var beginRow=document.getElementById("beginRow").value;/*開(kāi)始行*/
var endRow=document.getElementById("endRow").value;/*結(jié)束行*/
var beginCol=document.getElementById("beginCol").value;/*開(kāi)始列*/
var endCol=document.getElementById("endCol").value;/*結(jié)束列*/
var tempCol=beginRow+"/"+beginCol;/*定位要改變屬性的列*/
alert(tempCol);
var td=document.getElementById(tempCol);
/*刪除要合并的單元格*/
for(var x=beginRow;x

本文來(lái)自ChinaUnix博客，如果查看原文請(qǐng)點(diǎn)：http://blog.chinaunix.net/u1/50617/showart_2106618.html