隨意刪除表格的一列

Wed, 11 Jul 2007 01:23:53 +0800

一般要動態增加或刪除表格中的一個列，可以用表格物件的insertRow以及deleteRow方法。增加一列比較好操作，但是在要刪除一列時，傳入的參數是代表要刪除的列是第幾列，而從dom提供的屬性與方法中，無法直接獲得目前這一列是第幾列的資訊。尤其在不依照順序任意刪除列時，會變得不容易操作。

理論上透過簡單的遞迴其實就可以取得相關的資訊，所以就試了一下：

function rmRow(obj) {
var a = traceUp(obj, "TR");
var b = a.previousSibling;
var c = 0;
while (null != b) {
c++;
b = b.previousSibling;
}
d = traceUp(obj, "TABLE");
d.deleteRow(c);
}
function traceUp(obj, tag) {
if (obj.tagName.toUpperCase() == tag.toUpperCase()) {
return obj;
} else {
return traceUp(obj.parentNode, tag);
}
}

traceUp函數的作用是，傳入一個dom物件，然後傳回tagName符合的第一個上層物件。rmRow函數的作用則是刪除傳入的dom物件目前所在的列。這樣寫是為了方便，看看下面的例子：

＜input type='button' value='delete' onclick='rmRow(this);'>

只要把這個按鈕放在任何表格的一列中，就可以把這一列刪除，很方便。