作者stw82 (Godhand)
看板Ajax
標題[問題] javascript關於table insertRow的問題
時間Fri Nov 8 14:21:15 2013
案例如下，有張table需要根據某些td內的text值去做重新排序的動作
ex:
┌───┬───┐ ┌───┬───┐
│price │amount│ │price │amount│
├───┼───┤ ├───┼───┤
│ 200│ 1│ │ 300│ 4│
├───┼───┤ ├───┼───┤
│ 300│ 4│ => │ 200│ 1│
├───┼───┤ ├───┼───┤
│ 100│ 2│ │ 100│ 2│
└───┴───┘ └───┴───┘
在重新排序的部分，我是讓扣除第一列的欲比較的td內的text與該列之tr obj
成為一個長度為2的陣列，再將這些陣列集合組成一個二維陣列，結構如下
{[200,table.rows[1]].[300.table.rows[2]],[100,table.rows[3]]}
根據此二維陣列每個元素的第一個值去做Array.sort();
sort完畢後將排序過後的table.rows用appendChild()的方式貼回該table
而問題出在，當想要對重新排序過後的table使用table.insertRow()來動態產生新tr時
想要產生的tr索引位置從0到倒數第二行都沒問題，但是想要把新tr產生在最後一行時
(row index = table.rows.length)，新的tr卻會產生在price amount那一行之下
P.S. 若是將price amount那一行也重新appendChild到table第一行，新的tr則會產生在
price amount那一行之上
目前暫時能想到的解決方式是將一個空白tr放在尾行，重新排序時也將它固定append到
最後一行，不曉得板上有哪位大大清楚這個bug的成因為何，是否有更漂亮的解決方式?
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 36.224.204.115
1F：→ Rplus:有試試用 thead / tbody 直接把表頭分開嗎？ 11/08 14:42
2F：→ stw82:有 結果也是一樣 不曉得是不是appendChild後 會導致tr的最後 11/08 14:59
3F：→ stw82:一個索引+1時的位置不會變成最下面 11/08 14:59
發現這應該是browser的問題，開發環境我使用IE10，而在FF or Chrome就沒有這個問題
※ 編輯: stw82 來自: 36.224.204.115 (11/08 16:54)
4F：推 mrbigmouth:涉及dom結構還是用jQuery吧 不然跨瀏覽器真的各種問題 11/08 16:57
5F：→ mrbigmouth:都可能發生.... 11/08 16:57
http://jsfiddle.net/x5qjn/2/
雖然已經知道是瀏覽器問題了 但還是有點好奇如果不用jQuery的話
能否用純javascript解掉它
※ 編輯: stw82 來自: 123.192.203.129 (11/09 15:21)
8F：→ grence:看起來是 ie對 table裡的 tbody處理有 bug 11/09 21:25
9F：→ grence:& jquery能解一定是純 javascript有解 11/09 21:26
10F：→ stw82:其實不用thead tbody包起來 就IE來說也是一樣 11/11 01:47
11F：→ stw82:appendChild過後 最後一行的row index拿來insertRow就是 11/11 01:48
12F：→ stw82:會有問題 不過有點懶得去翻jQuery那一大包就是了._. 11/11 01:48