扩展Firefox下table控件的原型方法moveRow--JavaScript/Ajax--编程设计网

=波波日志 > JavaScript/Ajax > 扩展Firefox下table控件的原型方法moveRow=

扩展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>

类别：JavaScript/Ajax　作者：波波　日期：2011-03-11　【评论：0】　

上一篇：IE浏览器table控件moveRow方法使用说明　
下一篇：window.onerror自定义错误处理事件参数详解

暂时没有评论！

发表留言

热门博文