Jquery 刷新数据而不删除整个表_Jquery_Html_Ajax

Jquery 刷新数据而不删除整个表

jquery html ajax

Jquery 刷新数据而不删除整个表,jquery,html,ajax,Jquery,Html,Ajax,我得到了我想要的结果，当我按下按钮时，它会删除我不想要的整个表格这是我的jquery $(document).ready(function() { $('#button1').click(function(event) { $('#list').empty(); $.ajax({ url : 'http://98.199.64.63/api/eric_api.php?q=series', type : 'GET', dataTyp

我得到了我想要的结果，当我按下按钮时，它会删除我不想要的整个表格

这是我的jquery

$(document).ready(function() {
$('#button1').click(function(event) {
    $('#list').empty();
    $.ajax({
        url : 'http://98.199.64.63/api/eric_api.php?q=series',
        type : 'GET',
        dataType : 'json',
        success : function(data) {
            var table = $("#list");
            //table.html('');
            $.each(data, function(idx, elem) {
                table.append("<tr><td>" + elem.id + "</td>" + "<td>" + elem.user + 
                "</td>" + "<td>" + elem.email + "</td>" + "<td>" + elem.summary + "</td>" +
                "<td>" + elem.due_date + "</td>" + "<td>" + elem.problem_type + "</td>"+
                "<td>" + elem.status + "</td></tr>");
            });
        },
        error : function() {
            alert('There was an error');
        }
    });
});
});

$（文档）.ready（函数（）{
$（'#按钮1'）。单击（函数（事件）{
$（'#list'）.empty（）；
$.ajax({
网址：'http://98.199.64.63/api/eric_api.php?q=series',
键入：“GET”，
数据类型：“json”，
成功：功能（数据）{
var表=$（“#列表”）；
//html（“”）；
$.each（数据、函数（idx、元素）{
table.append（“+elem.id+”++“+elem.user+
“+”+elem.email+“+”+elem.summary+”+
“+elem.due\u date+”+“+elem.problem\u type+”+
“+elem.status+”）；
});
},
错误：函数（）{
警报（“出现错误”）；
}
});
});
});

这是我的html

<!DOCTYPE html>


<html>
<head>
    <title></title>
    <script src="js/jquery.js"></script>
    <script src="js/api_calls.js"></script>
    <link rel="stylesheet" href="css/normalizer.css" />
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div>
        <table id="list">
            <tr>
                <th>ID</th>
                <th>User</th>
                <th>Email</th>
                <th>Summary</th>
                <th>Due Date</th>
                <th>Problem Type</th>
                <th>Status</th>
            </tr>
        </table>
    </div>
    <div>
        <button id="button1">Get Data</button>
    </div>
</body>
 </html>


身份证件
使用者
电子邮件
总结
到期日
问题类型
地位
获取数据

我只想刷新td标签中的数据，而不是th标签。任何帮助，谢谢。

$（“#列表”）.empty（）；选择1 您总是可以删除第一个tr之后的任何tr，然后向表中追加新数据

var table = $("#list");
table.find('tr:gt(0)').remove();

$.each(data, function(idx, elem) {
    table.append("<tr><td>" + elem.id + "</td>" + "<td>" + elem.user + 
    "</td>" + "<td>" + elem.email + "</td>" + "<td>" + elem.summary + "</td>" +
    "<td>" + elem.due_date + "</td>" + "<td>" + elem.problem_type + "</td>"+
    "<td>" + elem.status + "</td></tr>");
});

var表=$（“#列表”）；
table.find（'tr:gt（0）'）.remove（）；
$.each（数据、函数（idx、元素）{
table.append（“+elem.id+”++“+elem.user+
“+”+elem.email+“+”+elem.summary+”+
“+elem.due\u date+”+“+elem.problem\u type+”+
“+elem.status+”）；
});

选择2 另一种选择是使用

和

HTML

<table id="list">
    <thead>
        <tr>
            <th>ID</th>
            <th>User</th>
            <th>Email</th>
            <th>Summary</th>
            <th>Due Date</th>
            <th>Problem Type</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <!-- Throw stuff in here -->
    </tbody>
</table>


身份证件
使用者
电子邮件
总结
到期日
问题类型
地位

var table = $("#list");

var tr = '';

$.each(data, function(idx, elem) {
    tr += "<tr><td>" + elem.id + "</td>" + "<td>" + elem.user + 
    "</td>" + "<td>" + elem.email + "</td>" + "<td>" + elem.summary + "</td>" +
    "<td>" + elem.due_date + "</td>" + "<td>" + elem.problem_type + "</td>"+
    "<td>" + elem.status + "</td></tr>";
});

table.find('tbody').html(tr);

var表=$（“#列表”）；
var tr=''；
$.each（数据、函数（idx、元素）{
tr+=“”+elem.id+“”+“”+elem.user+
“+”+elem.email+“+”+elem.summary+”+
“+elem.due\u date+”+“+elem.problem\u type+”+
“+elem.status+”；
});
table.find（'tbody'）.html（tr）；

只需替换

$（“#列表”）.empty（）与$（'#list tr:has（td）'）。删除（）您的问题是您正在删除#列表的所有子项。试试@adeneo的建议。这很有效，非常感谢。
var table = $("#list");

var tr = '';

$.each(data, function(idx, elem) {
    tr += "<tr><td>" + elem.id + "</td>" + "<td>" + elem.user + 
    "</td>" + "<td>" + elem.email + "</td>" + "<td>" + elem.summary + "</td>" +
    "<td>" + elem.due_date + "</td>" + "<td>" + elem.problem_type + "</td>"+
    "<td>" + elem.status + "</td></tr>";
});

table.find('tbody').html(tr);