不想使用jQuery追加表中的重复行 [英] Dont want to append the duplicate rows in the table using jquery

问题描述

我正在使用Ajax调用从数据库动态获取记录.但是，我想限制仅添加新行.例如，如果我有如下行用于第一个ajax调用.

I'm getting records dynamically from Database using an Ajax call. But, I want to restrict to add only new rows. For example, if I have rows as follows for 1st ajax call.

<tr><td>123</td><td>581</td><td>2013-05-05</td></tr> <br/>
<tr><td>198</td>td>55</td><td>2013-05-05</td></tr>

对于第二次ajax调用，我得到的行如下.

For 2nd ajax call, I'm getting the rows as follows.

<tr><td>123</td><td>581</td><td>2013-05-05</td></tr> <br/>
<tr><td>4465</td><td>3481</td>td>2013-06-05</td></tr>

现在，我想用第一个td值检查表.如果新行已经在表中包含行，则我不想追加它们.仅应附加不同的行.在上面的示例中，我不想将td与123值相加，因为它已经存在.我很困惑该怎么做.

Now, I would like to check the table with 1st td value. If the new rows are already having the rows in the table, I don't want to append them. Only the different rows should be appended. In the above example, I dont want to add the td with 123 value, because its already there. I'm confused how to do it.

$.ajax({ // Making an Ajax call.
            url:"/Project/getAllMessages.do", // Call URL.
            dataType:"json", // Expecting the data type as Json.                
            data:{ // Pass commodityId,apmcId,mainLabelId & UserDB to the ervice.

                mainLabelId:mainLabelId,
                inputDate:inputDate
            },
            "async":false,
            type:"POST",            
            success:function(allMessagesJson){ // Get Json data in Success Call back function.

                $('#divAllInbox').css('display','none');
                var allMessages = allMessagesJson[0];
                for(index in allMessages){

                    counter ++;
                    arrMsgs[counter] = allMessages[index]; // Take the complete message into Array.     
                    mysqlContentId = allMessages[index].mysqlContentId; //mysqlContentId.                



                    var imgMainLabel = mainLabelName.replace(/\s/g, ""); // Remove spaces from the string.



                    $("#tblMainLabelsInbox tbody").loadTemplate($("#messageTemplate"), // Load All tr's as Template. 
                            {
                                comm_main_labelid:allMessages[index].mainLabelId,
                                comm_mysql_id:mysqlContentId,
                                comm_hidden_date:allMessages[index].date
                            },
                            {
                                append:true
                            }
                    ); // Appended to Table.                        

                } // End For.   



            },
            error:function(xhRequest, ErrorText, thrownError){ // Error Call back function.
                if(xhRequest.status === 401 || xhRequest.status === 403){
                    alert("Bad Request. Please Try Again.");
                } else if ( xhRequest.status === 504 && !ajaxRequest++ ) {
                    loadData(commodity,apmc,mainLabelId,userDB);
                } else if ( xhRequest.status === 500) {
                    alert("Server error. Please try later.");
                }
            }
        });

推荐答案

我不想添加123值的td

如果您说第一列足以标识行，那么也许作为success处理程序的第一行，您可以从表中获取这些值并将它们放在数组中:

If you're saying that the first column is enough to identify the rows then perhaps as the first line of your success handler you could get those values from the table and put them in an array:

var rowIds = $("#tblMainLabelsInbox tbody tr td:first-child").map(function() {
                 return $(this).text();
             }).get();

...然后在for循环中，当您需要查看表中是否已经通过Ajax检索到的行时，只需检查它是否在数组中即可:

...and then within your for loop when you need to see if a row just retrieved via Ajax is already in the table just check if it's in the array:

if ($.inArray(mysqlContentId, rowIds) === -1) {
    $("#tblMainLabelsInbox tbody").loadTemplate($("#messageTemplate"), 
                        {
                            comm_main_labelid:allMessages[index].mainLabelId,
                            comm_mysql_id:mysqlContentId,
                            comm_hidden_date:allMessages[index].date
                        },
                        {
                            append:true
                        }
     ); // Appended to Table.
     rowIds.push(mysqlContentId);
}

我在上面的代码中假设您的mysqlContentId变量是其中包含记录键ID的变量.如果实际上是allMessages[index].mainLabelId，那么显然您将进行适当的替换.

I'm assuming in my code above that your mysqlContentId variable is the one with the record key id in it. If it is actually allMessages[index].mainLabelId then obviously you'd make the appropriate substitution.

我建议使用数组，因为在for循环的每次迭代中测试数组中的值要比测试DOM中的值更有效.说到高效，而不是通过在每个Ajax调用中循环遍历表(使用.map())来填充数组，也许如果您只是在页面首次加载时初始化一个空数组的话:

I suggest the array because it should be rather more efficient to test for a value in the array on each iteration of your for loop than to test for a value in the DOM. And speaking of efficient, rather than populating the array by looping through the table (with .map()) on each Ajax call, perhaps if you simply initialise an empty array when the page first loads:

var rowIds = [];

...然后，您只需在Ajax处理过程中添加id(就像上面显示的.push()一样)，然后就不需要遍历实际表了.

...then you can just add the ids during your Ajax processing (as with the .push() I showed above) and then you never need to loop through the actual table.

这篇关于不想使用jQuery追加表中的重复行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！