如何用 jQuery AJAX 替换表格的行

发布于02月11日

我有一个具有以下 struct 的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>

表的 struct 不能更改.现在，我想用类"Content"替换行(<tr>个元素)，用一个AJAX调用的结果替换"sum"(earch.php生成与前面描述的相同的表 struct )

我当前的代码如下所示:

    $(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>个元素(<tr>个元素中包含所有<td>个元素).因此，应该保留这两个标题，而不是从AJAX调用的结果中提取.

一个简单的解决方案是关闭标题后面的<tbody>元素，并使用不同的id/类创建一个新的<tbody>元素.但如前所述，这是不可能的，因为我不能更改表的 struct

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>

// DOM utility functions: const el = (sel, par) => (par || document).querySelector(sel); const els = (sel, par) => (par || document).querySelectorAll(sel); // Task: Search fetch data: const updateTableContent = (data) => { const elsContent = els(".mytable .body .content"); const elSum = el(".mytable .body .sum"); // 1. remove old .content rows elsContent.forEach(elCont => elCont.remove()); // 2. append new .content rows right before .sum row const doc = new DOMParser().parseFromString(data, "text/html"); const elsContentNew = els(".content", doc); elSum.before(...elsContentNew); }; // 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>`; const elSearch = el('#search_field'); elSearch.addEventListener("input", () => { const value = elSearch.value.trim(); //fetch(`https://someurl/search.php?search=${value}`) // .then(res => res.text()) // .then(updateTableContent); // DEMO WITH MOCKUP: updateTableContent(data); });

如何用 jQuery AJAX 替换表格的行

推荐答案

Jquery相关问答推荐

jQuery .append() 创建两个元素而不是一个

即使我使用 [FromBody] C# 从视图(Ajax)发送请求时在控制器中收到 NULL 对象

Jquery $(this) 子 Select 器

如何使 jQuery.ready 中定义的函数在全局可用？

Jquery each - 停止循环并返回对象

为什么 jQuery 不使用 requestAnimationFrame？

何时执行 $(document).ready 回调？

元素上的 jQuery Change 事件 - 有什么方法可以保留以前的值？

如何在 jQuery 中获取浏览器滚动位置？

ASP .NET MVC 在每个字段级别禁用客户端验证

如何在 jQuery 中修改序列化的表单数据？

试图检测浏览器关闭事件

如何使用jQuery在弹出窗口中预览输入类型=文件中的选定图像？

如何使用 requirejs 使 jQuery 插件可加载

JQuery Ajax Post 导致 500 内部服务器错误

jQuery闪烁突出显示对div的影响？

如何使用 Twitter Bootstrap 自动关闭alert

将片段添加到 URL 而不导致重定向？

更改 url 而不使用 javascript 重定向

粘性侧边栏：向下滚动时固定在底部，向上滚动时固定在顶部