Question

我有一张这样的表

<table>
<thead>
      <tr>
           <td>col_1</td><td>col_2</td><td>col_3</td>
      </tr>
</thead>

<tbody id="content">
      <tr>
           <td>cell_1_1</td><td>cell_1_2</td><td>cell_1_3</td>
      </tr>
</tbody>
</table>
<button id="ref" value="Refresh" />

我想使用ajax仅加载<tbody>的内容。这是我的剧本

$("ref").click(function(){
$.post("ajax.php",
function(data)
{
    $("#content").html(data)    
})
});

和ajax.php文件是这样的

echo ' <tr>
           <td>cell_1_1</td><td>cell_1_2</td><td>cell_1_3</td>
       </tr>';

但是当我加载它时，加载的数据会丢失它们的样式，如表＆＃34; tr＆＃34; s＆＃34; td＆＃34; s。我知道什么是错误的，当我把它作为一个完整的表格加载时＃34;有用。但是，是否有任何想法分别加载<tbody> ???

Answer 1

我强烈建议使用$.ajax，因为它可以更加自定义：

$("ref").click(function(){
    $.ajax({
        url:'ajax.php', // URL of where AJAX should POST the data
        type: 'POST', // Send a POST to server
        data: {'id': 3243}, // Data to be POSTED to server. In PHP use echo $_POST['id']; to see what the AJAX passed in
        dataType: 'HTML', // Expected data from server
        success: function(data){
            console.log(data); // <-- view what the server sent back to AJAX
            // OR
            alert(data);  // <-- view what the server sent back to AJAX

            $("#content").html(data);
        }
    });
});

修改

我仍然建议使用AJAX，但在阅读完评论之后我还有一个问题：

您是否正在使用jQuery在初始加载后格式化表格？

$('table tbody tr td').css({'padding':'10px'});

因为如果是，那么你需要在$("#content").html(data);之后重复它：

$("#content").html(data); $('table tbody tr td').css({'padding':'10px'});

原因是因为.css()样式元素在内联级别，所以当你刷新HTML（）时，那些<td>会丢失它们的样式。您应该在CSS文件中声明样式，以确保它在刷新时不会丢失。

使用ajax加载而不加载整个表

1 个答案: