根据位置排序文本字段 javascript

Question

我在一个表单中有 6 个垂直对齐的文本字段，其值对应于它的位置。每个文本字段都有一个与之关联的不可编辑的水果名称（如果可以的话，可编辑的文本字段就像序列号）
See JSFIDDLE URL

1 Apple
2 Banana
3 Cranberry
4 Date
5 Elderberry
6 Fennel

分别。用户可以编辑和更改（只有数字，水果名称不可编辑）它们的值在 1 到 6 之间（我有一个单独的 javascript 函数，不允许用户输入除正整数和不超过最大计数）。我想编写一个 javascript/jquery 函数，它将按照以下方法对数字进行排序：

假设用户将值3更改为5，这意味着值3的文本框移动到第5个位置。这意味着值 4 和 5 分别被推高到值 3 和 4（就像随机访问数组中的弹出和插入）。所以现在新值将是

1 Apple
2 Banana
5 Cranberry    <-- user edited this from 3 to 5
3 Date         <-- Javascript changed this
4 Elderberry   <-- Javascript changed this 
6 Fennel

注意值 3 在第 4 个位置，值 4 在第 5 个位置，值 1,2 和 6 不受影响。

现在，如果值 4（现在对应接骨木莓）再次更改为 1，我们应用相同的逻辑，javascript 排序后的输出将如下所示

2 Apple
3 Banana
5 Cranberry
4 Date
1 Elderberry   <-- user changed value from 4 to 1
6 Fennel

现在当用户保存并重新加载页面时，项目及其相应的索引被写入数据库，现在看起来像这样，

1 Elderberry
2 Apple
3 Banana
4 Date
5 Cranberry
6 Fennel

提前致谢。任何形式的建议或帮助表示赞赏！

我试过的代码：

function sort(oldnumber, newnumber) {
    var widget = $('#id'+oldnumber);  //assuming the text boxes are id1, id2, ... 
    if(oldnumber < newnumber) {
        for(var i = oldnumber+1; i <= newnumber; i++) {
            $('#id'+i).val(i-1);
        }
    }
    else {
        for(var i = oldnumber-1; i >= newnumber; i++) {
            $('#id'+i).val(i+1);
        }
    }
}

Answer 1

我创建了一个jsfiddle

根据输入更改行的位置。

HTML

<div> <input >1 Elderberry</div>
<div> <input >2 Apple</div>
<div> <input >3 Banana</div>
<div> <input >4 Date</div>
<div> <input >5 Cranberry</div>
<div> <input >6 Fennel</div>

JS

$("input").blur(function(){
    var parent =    $(this).parent();
    if(this.value == parent.siblings().length+1) {
            $(parent.siblings()[this.value-2]).after(parent);
        return;
    }
    $(parent.siblings()[this.value-1]).before(parent);
});

Answer 2

使用 insertBefore 方法，您可以轻松地重新排列行。重新索引只需在插入后完成。下面是一个简单的演示：http://jsfiddle.net/cgb2qLj2/

$('.row .num').on('change', function (evt) {
    var num = $(this).val();
    $(this).parent().insertBefore($('.row:nth-child('+num+')'));
    $('.row .num').each(function (i, input) {
        $(input).val(i + 1);
    });
});

编辑： 在不改变行的顺序的情况下，有一些额外的条件有点复杂，但它完成了工作。请注意，我们还必须为正确的行为保存之前的值。

已更新 fiddle：http://jsfiddle.net/cgb2qLj2/3/

更新代码：

var val = $(input).val();
if (input != self) {
    if (val > old && val <= num) {
        $(input).val(+val - 1);
    } else if (val < old && val >= num) {
        $(input).val(+val + 1);
    }
}

根据位置排序文本字段 javascript

Sort text fields based on position javascript

html

javascript

sorting

jquery

textbox