不想使用jquery在表中追加重复的行

时间:2013-12-23 11:39:35

标签: jquery

我使用Ajax调用从数据库动态获取记录。但是,我想限制只添加新行。例如,如果第一个ajax调用我有如下行。

<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调用,我得到的行如下。

<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值的表格。如果新行已经在表中有行,我不想附加它们。只应附加不同的行。在上面的例子中,我不想添加带有123值的td,因为它已经存在了。我很困惑怎么做。

$.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.");
                }
            }
        });

1 个答案:

答案 0 :(得分:2)

  

我不想添加带有123值的td

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

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

...然后在你的for循环中,当你需要查看刚刚通过Ajax检索的行是否已经在表中时,只需检查它是否在数组中:

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那么显然你会进行适当的替换。

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

var rowIds = [];

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