js實現動態刪除表格的行或者列-------Day57

昨天記錄了動態添加表格的一行，當然這個一行是指一行資料，也就是說一行多少列也是加上的，並且第幾列的內容都可以添加上，先來回顧下它的實現的關鍵點：

1、var row=table.insertRow();添加一行；

2、var cell1=row.insertCell();添加一個單元格；(如果在後面繼續寫var cell2=row.insertCell()的話，就是添加第二列;)

3、cell1.innerHTML="第一列的內容"；向第一個單元格中填充值

以上就是昨天記錄的動態添加一行的全部了，當然能夠添加就能刪除，而今天來記錄的就是動態刪除，刪除一行，刪除一列。首先看刪除一行：

我們先來看存在的表格：

這樣，現在存在一個四行兩列的表格，我們先來實現刪除某指定一行：假定我們需要刪除第三行，我們該怎麼寫呢？

這樣來看一下代碼：在html代碼中，在delRow按鈕上添加方法onclick="c()";

function c(){var table=document.getElementById("tad");var len=table.rows.length;table.deleteRow(len-2);//這裡刪除的是倒數第二行，也就是第三行}

這樣我們來運行下，結果顯示為：

這樣，第三行就被刪除了，由此我們可以得知，刪除一行的方法為deleteRow(index)，index為參數，表示第幾行，這個參數時從上向下，由0開始數的，另外有特別需要注意的一點：如果參數不寫，則效果與參數為0一樣，表示刪除最上面一行

這樣實現刪除所有行是不是就有思路了，這樣我們來寫下代碼：

function c(){var table=document.getElementById("tad");var len=table.rows.length;for(var i=0;i<len;i++){    table.deleteRow();//也可以寫成table.deleteRow(0);}}

這樣我們來看下結果：

就只剩下table的外殼了，裡面的內容全都不見了，原理我們懂了，代碼我們也實現了，但是在實現過程中有幾點我們需要注意：

1、在迴圈中我們是首先擷取的固定值，var len=table.rows.length;然後i<len，而不是直接寫i<table.rows.length;

想必大家都明白其中的原因，刪除一行之後，在進入第二次迴圈的時候，表格已經變動了，則table.rows.length也改變了，然而i也增大了，等到table.row.length<=i的時候行並沒有全部刪光，在這個例子中的話應該是i=2的時候table.rows.length也等於2了，則就不再進行刪除了，所以會餘下兩行，解決的辦法之一，當然就是按我寫這樣，另一種也可以把i++去掉，知道len=0的時候停止也可以，但是理解起來有點麻煩了就

2、在迴圈中我們寫的是table.deleteRow()或者table.deleteRow(0),而不是table.deleteRow(i)，跟1中的原因一樣的哦

接下來我們再來記錄下刪除列，如果說行是deleteRow()的話，列該怎麼寫呢，這裡沒有cols的事情，事實上就是之前添加的單元格啊，將每一行的同一列上的單元格全部刪除掉不就等同於刪除了一列麼，刪除單元格的方法同樣跟添加是對應的deleteCell();

這樣如果說只刪除固定列，怎麼寫也就呼之欲出了吧，繼續就上面的表格進行操作，刪除第三行第二列，我們來寫下實現代碼：

function d(){var table=document.getElementById("tad");table.rows[2].deleteCell(1);}

這個結果太明顯了吧，那樣所有列都刪除也就容易多了，來繼續實現下代碼：

function d(){var table=document.getElementById("tad");for(var i=0;i<table.rows.length;i++){table.rows[i].deleteCell(1);}}

這個結果也就隨之而來了，這樣我們就實現了動態刪除行和列，我們再來總結下：

1、刪除行的方法：deleteRow();添加行則是insertRow();

2、刪除列,即是刪除單元格，方法為：deleteCell()；而添加列則是insertCell()

最近工作碰到了個小問題，uml時序圖一直沒法徹底理解了呢，看起來挺簡單的，可就繞不出那個彎了，加油啊...