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（现在对应于Elderberry）更改为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

使用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);
    });
});

编辑：在不改变行的顺序的情况下，它会因某些额外条件而变得更复杂，但它可以完成工作。请注意，我们还必须保存以前的值以获得正确的行为。

更新了小提琴：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);
    }
}

Answer 2

我创建了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);
});

根据位置javascript对文本字段进行排序

2 个答案: