1

您好我在 jquery 中使用 ajax post 和 json 从 php 读取数据库输出。现在，一旦我获得 onClick 数据，如果我再次按下按钮，数据就会再次填充到它下方。我想用新内容替换数据。我对 jquery 和 ajax 有点陌生。我正在使用的代码是：

    $.ajax({
type:'POST',
dataType: 'json',
url:'database.php',
data:{search: $("#search").val()},
success:function(rows){
    for (var i = 0, len = rows.length; i < len; i++) {
        $('#output').html($('#output').html() + '<tr><td>'+ rows[i].Cat_Name +'</td><td>'+ rows[i].Drug_Caty +'</td><td>'+ rows[i].G_Name +'</td><td>'+ rows[i].B_Name +'</td><td>'+ rows[i].D_Indications +'</td></tr>'        
        );
});
4

3 回答 3

1

您可以使用empty()方法，然后append()使用新数据，尝试以下操作：

success:function(rows){
    $('#output').empty(); // Removes all child nodes of the set of matched elements from the DOM.
    for (var i = 0, len = rows.length; i < len; i++) {
        $('#output').append('<tr><td>'+ rows[i].Cat_Name +'</td><td>'+ rows[i].Drug_Caty +'</td><td>'+ rows[i].G_Name +'</td><td>'+ rows[i].B_Name +'</td><td>'+ rows[i].D_Indications +'</td></tr>'        
    };
}
于 2012-07-19T05:40:05.310 回答
0

你在做

output.html = output.html + x;

doing it 3 times will produce

(((output.html + x) + y) + z)

可能是你想要做的是

output.html = x;

如果您只想替换 Ajax 加载的内容并保持其他行不变：

success:function(rows){
    if($('.ajaxloaded').length)$('.ajaxloaded').remove();
    for (var i = 0, len = rows.length; i < len; i++) {
        $('#output').html('<tr class="ajaxloaded"><td>'+ rows[i].Cat_Name +'</td><td>'+ rows[i].Drug_Caty +'</td><td>'+ rows[i].G_Name +'</td><td>'+ rows[i].B_Name +'</td><td>'+ rows[i].D_Indications +'</td></tr>');
        }
    }

如果您的#output 是表格，还请检查@SangeethMenon 建议一个 tbody

于 2012-07-19T05:41:05.297 回答
0

假设是aoutput的 id<tbody><table>

然后试试这个

$("#output").html("");

for (var i = 0, len = rows.length; i < len; i++) {
        $('#output').html('<tr class="ajaxloaded"><td>'+ rows[i].Cat_Name +'</td><td>'+ rows[i].Drug_Caty +'</td><td>'+ rows[i].G_Name +'</td><td>'+ rows[i].B_Name +'</td><td>'+ rows[i].D_Indications +'</td></tr>');
        }
    }

否则，如果它本身output的 id<table>

然后试试这个

$("#output tbody").html("");


for (var i = 0, len = rows.length; i < len; i++) {
        $('#output').html('<tr class="ajaxloaded"><td>'+ rows[i].Cat_Name +'</td><td>'+ rows[i].Drug_Caty +'</td><td>'+ rows[i].G_Name +'</td><td>'+ rows[i].B_Name +'</td><td>'+ rows[i].D_Indications +'</td></tr>');
        }
    }

PS要保留表格的标题，您应该将它们放在<thead>标签内

于 2012-07-19T05:54:48.233 回答