扩展Firefox下table控件的原型方法moveRow
火狐浏览器的table控件没有同IE浏览器的moveRow方法,所以自己扩展了下Element的原型,将Firefox的moveRow方法加上,这样就可以使用了。
测试代码如下
+展开
-HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>扩展Firefox下table控件的原型方法moveRow-extend firefox table prototype method moveRow</title>
</head>
<body><table border="1" id="tbTest">
<tr><td>1111111111111</td><td><input type="button" value="上" /> <input type="button" value="下" /></td></tr>
<tr><td>2222222222222</td><td><input type="button" value="上" /> <input type="button" value="下" /></td></tr>
<tr><td>3333333333333</td><td><input type="button" value="上" /> <input type="button" value="下" /></td></tr>
<tr><td>4444444444444</td><td><input type="button" value="上" /> <input type="button" value="下" /></td></tr></table>
<script type="text/javascript">
if (typeof Element != 'undefined') Element.prototype.moveRow = function (sourceRowIndex, targetRowIndex) {//执行扩展操作
if (!/^(table|tbody|tfoot|thead)$/i.test(this.tagName) || sourceRowIndex === targetRowIndex) return false;
var pNode = this;
if (this.tagName == 'TABLE') pNode = this.getElementsByTagName('tbody')[0]; //firefox会自动加上tbody标签,所以需要取tbody,直接table.insertBefore会error
var sourceRow = pNode.rows[sourceRowIndex], targetRow = pNode.rows[targetRowIndex];
if (sourceRow == null || targetRow == null) return false;
var targetRowNextRow = sourceRowIndex > targetRowIndex ? false : getTRNode(targetRow, 'nextSibling');
if (targetRowNextRow === false) pNode.insertBefore(sourceRow, targetRow); //后面行移动到前面,直接insertBefore即可
else {//移动到当前行的后面位置,则需要判断要移动到的行的后面是否还有行,有则insertBefore,否则appendChild
if (targetRowNextRow == null) pNode.appendChild(sourceRow);
else pNode.insertBefore(sourceRow, targetRowNextRow);
}
}
//Firefox下表格里面的空白,回车也算一个节点,所以需要过滤一下节点类型。
function getTRNode(nowTR, sibling) { while (nowTR = nowTR[sibling]) if (nowTR.tagName == 'TR') break; return nowTR; }
function movePreNext(btn, isNext) {
var tr = btn.parentNode.parentNode
, refTR = getTRNode(tr, isNext ? 'nextSibling' : 'previousSibling');
if (refTR == null) alert(isNext ? '已经是最后一条!' : '已经是第一条!');
else document.getElementById('tbTest').moveRow(tr.rowIndex, refTR.rowIndex);
}
var btns = document.getElementById('tbTest').getElementsByTagName('input');
for (var i = 0; i < btns.length; i++) btns[i].onclick = function () { movePreNext(this, this.value == '下'); }
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>扩展Firefox下table控件的原型方法moveRow-extend firefox table prototype method moveRow</title>
</head>
<body><table border="1" id="tbTest">
<tr><td>1111111111111</td><td><input type="button" value="上" /> <input type="button" value="下" /></td></tr>
<tr><td>2222222222222</td><td><input type="button" value="上" /> <input type="button" value="下" /></td></tr>
<tr><td>3333333333333</td><td><input type="button" value="上" /> <input type="button" value="下" /></td></tr>
<tr><td>4444444444444</td><td><input type="button" value="上" /> <input type="button" value="下" /></td></tr></table>
<script type="text/javascript">
if (typeof Element != 'undefined') Element.prototype.moveRow = function (sourceRowIndex, targetRowIndex) {//执行扩展操作
if (!/^(table|tbody|tfoot|thead)$/i.test(this.tagName) || sourceRowIndex === targetRowIndex) return false;
var pNode = this;
if (this.tagName == 'TABLE') pNode = this.getElementsByTagName('tbody')[0]; //firefox会自动加上tbody标签,所以需要取tbody,直接table.insertBefore会error
var sourceRow = pNode.rows[sourceRowIndex], targetRow = pNode.rows[targetRowIndex];
if (sourceRow == null || targetRow == null) return false;
var targetRowNextRow = sourceRowIndex > targetRowIndex ? false : getTRNode(targetRow, 'nextSibling');
if (targetRowNextRow === false) pNode.insertBefore(sourceRow, targetRow); //后面行移动到前面,直接insertBefore即可
else {//移动到当前行的后面位置,则需要判断要移动到的行的后面是否还有行,有则insertBefore,否则appendChild
if (targetRowNextRow == null) pNode.appendChild(sourceRow);
else pNode.insertBefore(sourceRow, targetRowNextRow);
}
}
//Firefox下表格里面的空白,回车也算一个节点,所以需要过滤一下节点类型。
function getTRNode(nowTR, sibling) { while (nowTR = nowTR[sibling]) if (nowTR.tagName == 'TR') break; return nowTR; }
function movePreNext(btn, isNext) {
var tr = btn.parentNode.parentNode
, refTR = getTRNode(tr, isNext ? 'nextSibling' : 'previousSibling');
if (refTR == null) alert(isNext ? '已经是最后一条!' : '已经是第一条!');
else document.getElementById('tbTest').moveRow(tr.rowIndex, refTR.rowIndex);
}
var btns = document.getElementById('tbTest').getElementsByTagName('input');
for (var i = 0; i < btns.length; i++) btns[i].onclick = function () { movePreNext(this, this.value == '下'); }
</script>
</body>
</html>
加支付宝好友偷能量挖...
原创文章,转载请注明出处:扩展Firefox下table控件的原型方法moveRow