Question

我有一个jquery脚本访问db并返回一个数字结果并将该结果写入表格单元格。此脚本在页面加载时运行，但也在下拉菜单更改时运行。我希望每个表格单元格只能限制1个结果。

现在当页面加载时，它会将结果写入单元格，当下拉菜单更改时，它只是将新结果添加到单元格而不是替换它。

我已经搜索了很多，试图弄清楚如何做到这一点并且无法想出任何东西。有人能帮助我吗？

这是jQuery：

$(document).ready(function(){

$('.typeval').change(function(){
    var movement    =  $(this).val();
    var client_id   = $(this).parent().siblings().find('.clientval').val();
    var class_id    = <? echo $class_id; ?>;
        $count      = $(this).parents('tr').find('label.count');

$.ajax({ 
  type: "POST",
  url: "movement_count.php",
  data: {movement:movement, client_id:client_id, class_id:class_id},
  dataType: "json", 
  async: false,
  success:(function(output) {      

      $.each(output, function(index, value){
     //alert(value);
     $count.append(output[index]);
     }); // each
     })     
}) // ajax

}).change(); // .typeval

});  // document

这是表格单元格，我只想一次显示一个结果。

<td><label class="count">5</label></td>

如果我没有提供所需帮助的足够信息，请告诉我。

Answer 1

使用.text()代替.append()：

$count.text(output[index]);

顾名思义，.append()将内容添加到容器的末尾。然而，.text()设置容器中显示的文本，覆盖任何现有文本。

实际上，.html()的行为更像.append()而不是.text()，但除非您实际设置.html()，否则我建议不要使用.html()。由于您说结果是数字，.text()更好。

Answer 2

尝试更新AJAX调用以在添加新结果之前清除内容：

$.ajax({ 
    type: "POST",
    url: "movement_count.php",
    data: {movement:movement, client_id:client_id, class_id:class_id},
    dataType: "json", 
    async: false,
    success:(function(output) {      

        $.each(output, function(index, value){
            //alert(value);

            $count.html(''); // Clear current content

            $count.append(output[index]); // Append new content

        }); // each
     })

}）// ajax

每个表格单元只允许一个查询结果

2 个答案: