Question

这是一个简单的HTML <table>，有2行，每行都有链接来上下移动行：

＆＃13;

<table border=1>
    <tr>
        <td>Row A</td>
        <td>
            <a href="javascript:void(0)" onclick="up(this)">Up</a>
            <a href="javascript:void(0)" onclick="down(this)">Down</a>
        </td>
    </tr>
    <tr>
        <td>Row B</td>
        <td>
            <a href="javascript:void(0)" onclick="up(this)">Up</a>
            <a href="javascript:void(0)" onclick="down(this)">Down</a>
        </td>
    </tr>
</table>

<script>
    function up(link) {
        var row = link.parentNode.parentNode;
        var prevRow = row.previousSibling;
        if (prevRow != null) {
            row.parentNode.insertBefore(row, prevRow);
        }
    }
    function down(link) {
        var row = link.parentNode.parentNode;
        var nextRow = row.nextSibling;
        if (nextRow != null) {
            row.parentNode.insertBefore(nextRow, row);
        }
    }
</script>

＆＃13;

为什么点击第一行的Down链接一开始什么都不做（没有错误），但是第二次点击是否有效？同样，点击第二行的Up链接一开始什么都不做，但之后开始工作？

此外，如果我点击一个无法执行的链接（例如第一行的Up或最后一行的Down），那么应该工作的同一行的另一个链接（第一行的Down在后续点击时不起作用，但如果再次点击则有效吗？

我应该做什么/改变，以便链接在第一次点击时起作用？

Answer 1

因为空格也是节点previousSibling / nextSibling在您第一次调用任何函数时返回#text，之后它会自行修复。因此，要让它在第一次更改为previousElementSibling / nextElementSibling

时才能正常工作

<table border=1>
    <tr>
        <td>Row A</td>
        <td>
            <a href="javascript:void(0)" onclick="up(this)">Up</a>
            <a href="javascript:void(0)" onclick="down(this)">Down</a>
        </td>
    </tr>
    <tr>
        <td>Row B</td>
        <td>
            <a href="javascript:void(0)" onclick="up(this)">Up</a>
            <a href="javascript:void(0)" onclick="down(this)">Down</a>
        </td>
    </tr>
</table>

<script>
    function up(link) {
        var r = link.parentNode.parentNode;
        var rp = r.previousElementSibling;
        if (rp != null) {
            r.parentNode.insertBefore(r, rp);
        }
    }
    function down(link) {
        var r = link.parentNode.parentNode;
        var rn = r.nextElementSibling;
        if (rn != null) {
            r.parentNode.insertBefore(rn, r);
        }
    }
</script>

切换表行仅适用于第二次

1 个答案: