作者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