扩展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 == nullreturn 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'breakreturn 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(thisthis.value == '下'); }
</script> 
</body>
</html>

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:扩展Firefox下table控件的原型方法moveRow

评论(0)Web开发网
阅读(186)喜欢(1)JavaScript/Ajax开发技巧