jquery - 如何根据在 jquery 文本框中扫描的值在行列表中交换特定行

Question

我正在开发一个 Web 应用程序，因为我根据在文本框中输入的值动态生成表格行。只有一个条件，如果我两次输入相同的值(一个接一个)，它不应该添加行。如果我输入 10 个不同的值，并且在第 10 次输入我之前输入的值，该行应该位于表的顶部。 (它不应该再次添加)。

例如，我输入值 1,2,3,4,5,6,7,8,9,10 并且第 11 次输入值 1 然后在该表的第 1 行应该位于顶部 (1,10,9,8,7,6,5,4,3,2)。

如果我输入 1,1 那么它应该只添加一次行。请帮我完成这个。提前致谢。

$(document).ready(function(){
    var WholeString="";

    /*To Search Shipment id through webservice: Begin */    
    $('#searchkey').change(function(){
        Allboxes=new Array();
        Allboxes[0]=0;

            $.ajax({
            type : 'POST',
            url : '@routes.Application.searchkey()',
            data : {
                searchkey : $(this).val(),
                orgname: 'FB'
            },
            success : function(data) {
                console.log("success"+data);
                var arr = data.split('&');


                if((arr[0]!="null")&&(arr[1]!="null")&&(!WholeString.contains(arr[0])))
                {
                    WholeString=WholeString+"::"+arr[0];

                    var table='<tr  class="active" style="height:40px;">';
                    table += '<td><input type="checkbox" class="radio" name="name1" value="1" checked /></td>';
                    table += '<td> <button type="button" class="btn btn-primary btn-sm dark_button width-150px">'+arr[0]+'</button></td>';
                    table += '<td>'+arr[1]+'</td>';
                    table+='<td><i  style="color:green;font-size:18px" class="fa fa-check"></i></td>';
                    table += '</tr>';

            // append table in box_content
                $("#boxnumberarea").append(table);

            // creates tbody and append to last inserted table
                var $tbody = $('<tbody>').appendTo('#boxnumberarea table:last');
                Allboxes[0]=arr[0];
                }
            },
            error : function() {
                console.log("failed");

            }
              });
         $(this).val('');


/*To Search Shipment id through webservice: End */  
    });
    if (!('contains' in String.prototype)) String.prototype.contains = function (str, startIndex) {
        return -1 !== String.prototype.indexOf.call(this, str, startIndex);
    };
});

  </script>

假设在 tbody 内部附加了 ajax 部分。现在代码将不允许重复值。除此之外，我还想要上述功能。

Answer 1

为此，在添加行时比较数据，如果找到则在该行之前添加其他行。

我已经设置了一个示例 here .检查一下。

已更新 样本以匹配您的结构:http://jsfiddle.net/wv5jLmqd/1/ .

检查现有相似行的代码片段:

    $("#tab tr td:first-child").each(function (idx) {
        if ($(this).text() === num) {
            foundAt = idx;
            return false;
        }
    });

添加行:

    if (foundAt !== -1) {
        $row = $("#tab tr").eq(foundAt);
    } else {
        $row = $("<tr><td>" + num + "</td><td> SAMPLE TEXT</td>");
    }

引用:

1. .each()

2. .prepend()

3. .eq()