如何用jQuery / AJAX 替换表格的行

cpjpxq1n 于 2023-02-11 发布在 jQuery

关注(0)|答案(3)|浏览(206)

我有一个HTML表格，结构如下

<table class="mytable">
   <tbody class="body">
      <tr class="headline1"> ... several td tags with some text ... </tr>
      <tr class="headline2"> ... several td tags with some text ... </tr>
      <tr class="content"> ... several td tags with some text ... </tr>
      <tr class="content"> ... several td tags with some text ... </tr>
      <tr class="content"> ... several td tags with some text ... </tr>
      <tr class="content"> ... several td tags with some text ... </tr>
      <tr class="sum"> ... several td tags with some text ... </tr>
   </tbody>
</table>

表的结构不能改变，现在我想用一个 AJAX 调用的结果来替换带有类“content”和“sum”的行（<tr>元素）（search.php生成和前面描述的一样的表结构）
我当前的代码如下所示：

$(document).ready(function(){

        const search_field = $('#search_field');

        search_field.keyup(function(){
            $.ajax({
                url:'http://someurl/search.php?search=' + search_field.val(),
                type:"POST",
                success:function(data){
                    var xxx = $(data).find('.body').html();
                    $('.body').html(xxx);
                }
            });
        });
    });

代码可以工作，但是替换了整个tbody，我只想替换<tr>元素（所有<td>元素都包含在<tr>元素中），所以这两个标题应该保留，而不是从 AJAX 调用的结果中删除。
一个简单的解决方案是关闭标题后面的<tbody>元素，并创建一个具有不同id/class的新<tbody>元素。

jquery

来源：https://stackoverflow.com/questions/75417194/how-to-replace-lines-of-a-table-with-jquery-ajax

3条答案

按热度按时间

rqqzpn5f1#

缓存.sum行
删除旧的.content行
从新数据HTML中仅获取.content
使用.before()方法在.sum元素行之前插入新行
在Search输入中使用.on()方法。用户也可以向其中粘贴一个值，在这种情况下，* key * 事件将不会注册

const updateTableContent = (data) => {
  const $content = $(".mytable .body .content");
  const $sum = $(".mytable .body .sum");

  // 1. remove old .content rows
  $content.remove();
  
  // 2. append new .content rows right before .sum row
  $sum.before($(data).find(".content"));
};

// Example:

// Just a demo response data mockup:
const data = `<!DOCTYPE html><html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>Test</title>
</head><body><table class="mytable"><tbody class="body">
  <tr class="headline1"><td>Headline new 1</td></tr>
  <tr class="headline2"><td>Headline new 2</td></tr>
  <tr class="content"><td>Content new 1</td></tr>
  <tr class="content"><td>Content new 2</td></tr>
  <tr class="content"><td>Content new 3</td></tr>
  <tr class="content"><td>Content new 4</td></tr>
  <tr class="content"><td>Content new 5</td></tr>
  <tr class="sum"><td>Sum new</td></tr>
</tbody></table></body></html>`;

$('#search_field').on("input", function() {
  // AJAX...
      updateTableContent(data);
  //...
});

<label>Search: <input id="search_field" type="search"></label>
<table class="mytable">
   <tbody class="body">
      <tr class="headline1"><td>Headline old 1</td></tr>
      <tr class="headline2"><td>Headline old 2</td></tr>
      <tr class="content"><td>Content old 1</td></tr>
      <tr class="content"><td>Content old 2</td></tr>
      <tr class="content"><td>Content old 3</td></tr>
      <tr class="sum"><td>Sum old</td></tr>
   </tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

提示：现在，您不一定需要jQuery：
一个二个一个一个
无论如何，如果可能的话，应该更好地重写search.php以提供JSON数据。这样的数据可以在许多其他不一定使用<table>的组件中重用。另外，您不一定需要从前端使用这样的JSON数据，但也可以从其他后端脚本使用。考虑一下，重写服务器端API逻辑从长远来看可能会有所帮助。

赞(0）回复(0）举报 2023-02-11

slhcrj9b2#

您将需要使用outerHTML或使用.body的父选择器，因为jQuery的.html()只获取指定选择器的内容。
我用了第一个，我认为它的工作原理和你描述的一样。看看this fiddle。

赞(0）回复(0）举报 2023-02-11

6yjfywim3#

...
success: function(data) {
$('.content:eq(0)').html( $(data).find('.content:eq(0)').html() );
$('.content:eq(1)').html( $(data).find('.content:eq(1)').html() );
$('.content:eq(2)').html( $(data).find('.content:eq(2)').html() );
$('.content:eq(3)').html( $(data).find('.content:eq(3)').html() );
$('.sum').html($(data).find('.sum').html());
}

或者对.content行使用循环：

success: function(data) {
let rows = $('.body .content');
for(let i = 0; i < rows.length; i++) {
    let selector = '.body .content:eq(' + i + ')'
    $(selector).html( $(data).find(selector).html() );
}
}

赞(0）回复(0）举报 2023-02-11

我来回答

如何用jQuery / AJAX 替换表格的行

3条答案

相关问题

热门标签

最新问答