如何在Javascript中向上或向下移动文本行答案

【问题标题】：How to move up or down a text row in Javascript如何在Javascript中向上或向下移动文本行
【发布时间】：2017-10-04 02:25:29
【问题描述】：

我遇到了关于向上或向下移动文本行的问题，当我向上或向下移动一行时，它可以移动但似乎旧行仍然存在并且没有被删除

例如：我向下移动“文本 2”，它可以移动但行仍然存在

这是我的来源：

<head>
<script>
function down_move(index)
{
var frm = document.writeForm;
var opts=frm["ans_list" + index].options

for (var i=opts.length-1; i>=0; i--) {
    if (opts[i].selected && i<opts.length-1) {
        tmp = opts[i].cloneNode(true);
        // opts[i].removeChild(true);
        opts[i].removeChild(opts[i].childNodes[0]);
        opts[i].insertAdjacentElement("afterEnd", tmp).selected = true;
    }
}
 setting_val(index);
}
</script>
</head>

<body>
<div>
   <a href="#" onClick="javasript:down_move('<%=i+1%>');" style="float:left"><span class="bt_test_admin bg_type_01">▼ Order</span></a>
</div>
</body>

我从控制台错误浏览器收到一条消息：

Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.

如何修复错误？谢谢

【问题讨论】：

您能否更新您的问题以包含minimal, complete, and verifiable example？谢谢。
当您说“文本行”时，您是指<option> 元素中的<select> 元素吗？显示的 HTML 不包含任何 ans_listx 元素，因此请 edit 您的问题提供所有相关的 HTML。
嗨@nnnnnn：它只是一个带有文本的普通行
“它只是一个带有文本的普通行” - 什么是“普通行”？ <table> 元素有行，但是您的 JavaScript 正在对具有 .options 集合的元素执行某些操作，这意味着 <select> 元素。再次，请edit 显示相关 HTML 的问题。
对不起，因为我只关注行来移动它，我会更新我的问题..

标签： javascript jquery html jquery-ui

【解决方案1】：

你必须找到按钮的父tr，然后找到之前追加的元素。因为没有在一个元素之后追加的功能，所以当你想向下移动时，你必须找到第二个下一个元素。

只需将这两个功能分别应用于上排和下排。我相信它会为你工作

上移功能

function MoveUpRow() {
    var table,
        row = this.parentNode;

    // find the parent tr ( the row element )
    while ( row != null ) {
        if ( row.nodeName == 'TR' ) {
            break;
        }
        row = row.parentNode;
    }
    // the parent of the row is the table body
    table = row.parentNode;
    // insert the row before it's previevs siblings
    table.insertBefore ( row, get_previoussibling( row ) );
}

下移行功能

function MoveDownRow() {
    var table,
        row = this.parentNode;

    while ( row != null ) {
        if ( row.nodeName == 'TR' ) {
            break;
        }
        row = row.parentNode;
    }
    table = row.parentNode;
    // you have to find the second next siblings to append before
    // NOTE: if the second parameter of the 'insertBefore' function is null
    //       it will append the row to the table! 
    table.insertBefore ( row, get_nextsibling ( get_nextsibling( row ) ) );
}

【讨论】：

【解决方案2】：

您的问题缺少 HTML 上下文。无论如何，从选择中删除选项似乎是错误的

我这样修改了你的代码。

function down_move(index)
{
var frm = document.writeForm;
var elSelect = frm["ans_list" + index];
var opts=elSelect.options

for (var i=opts.length-1; i>=0; i--) {
    if (opts[i].selected && i<opts.length-1) {
        tmp = opts[i].cloneNode(true);
        tmp.selected=true;
        // opts[i].removeChild(true);
        elSelect.remove(i);
        elSelect.add(tmp, i + 1);
    }
}
 setting_val(index);
}

【讨论】：