如何使用 Jquery 在特定行之后插入多个表行？答案

【问题标题】：How to insert multiple table rows after specific row with Jquery?如何使用 Jquery 在特定行之后插入多个表行？
【发布时间】：2015-05-12 10:45:00
【问题描述】：

我有一个 HTML 表格，其中每一行都有一个数据元素。像这样的：

<tr class="logreader-header-row">
   <td class="logtable-header" colspan="100%" data-date="2015-05-12">
      <img class="logreader-header-controller" src="images/logreader-dropdown.png">
      2015-05-12
   </td>
</tr>
<tr class="logreader-header-row">
   <td class="logtable-header" colspan="100%" data-date="2015-05-11">
      <img class="logreader-header-controller" src="images/logreader-dropdown.png">
      2015-05-11
   </td>
</tr>
<tr class="logreader-header-row">
   <td class="logtable-header" colspan="100%" data-date="2015-05-07">
      <img class="logreader-header-controller" src="images/logreader-dropdown.png">
      2015-05-07
   </td>
</tr>

每一行都附加了一个 onclick 事件。当用户单击该行时，数据属性正在通过 AJAX 请求发送到服务器：

$().ready(function(){
    $(".logtable-header").each(function(){
        $(this).on("click", function(){
            var header_row = $(this).parent("logreader-header-row");
            $.ajax({
                type: 'POST',
                url: URL+'admin/ajax_processor/getLog',
                data:{date:$(this).data("date")},
                success: function(response){
                    header_row.after(response);
                },
                error: function(request, status, error){
                    console.log(request);
                    console.log(status);
                    console.log(error);
                }
            });
        });
    });
});

AJAX 响应包含服务器上生成的表行子集的 HTML 代码。我想要的是在被点击的那一行之后插入这些行。这是我在 AJAX 响应中的内容：

<tr class="logtable-oddrow-notice">
    <td>2015-04-27</td>
    <td>08:55:07</td>
    <td>NOTICE</td>
    <td>ERROR 404 Requested url: "http://localhost/PH-SERVER_MIRROR/frontend/index/" not found! (user:unidentified[id:-])</td>
</tr>

<tr class="logtable-evenrow-notice">
    <td>2015-04-27</td>
    <td>09:21:08</td>
    <td>NOTICE</td>
    <td>'Test'[id:30] user succesfully logged in.</td>
</tr>

<tr class="logtable-oddrow-notice">
    <td>2015-04-27</td>
    <td>10:13:37</td>
    <td>NOTICE</td>
    <td>New newsletter created: "Teszt 2" by user:Test[id:30]</td>
</tr>

header_row 是被点击的<td> 元素的父<tr> 元素：

var header_row = $(this).parent("logreader-header-row");

但是点击<tr>后我无法插入回复：

success: function(response){
    header_row.after(response);
},

我做错了什么？

【问题讨论】：

var header_row = $(this).parent("logreader-header-row"); 错过了类点
为什么在 .each() 中需要 .on('click');我认为它没用
$(".logtable-header").on("click", function(){... 将为所有提到类的 td 元素注册事件，所以这里没有必要循环。
您可以通过将点击处理程序附加到tr.logreader-header-row 元素而不是它们唯一的td 元素来简化。

标签： jquery

【解决方案1】：

您需要在parent() 调用中包含类选择器：parent('.logreader-header-row')（注意.）

也就是说，在这种情况下最好使用closest()，因为它将在第一场比赛中停止。此外，您不需要使用each() 函数来分配事件。试试这个：

$(".logtable-header").click(function(){
    var header_row = $(this).closest(".logreader-header-row");
    $.ajax({
        type: 'POST',
        url: URL + 'admin/ajax_processor/getLog',
        data: { date: $(this).data("date") },
        success: function(response) {
            header_row.after(response);
        },
        error: function(request, status, error){
            console.log(request);
            console.log(status);
            console.log(error);
        }
    });
});

【讨论】：

【解决方案2】：

logreader-header-row 是一个类，这意味着要选择它，您需要在其前面加上 . 字符（Class selector）。

var header_row = $(this).parent(".logreader-header-row");

否则您的代码正在搜索<logreader-header-row> 元素。

【讨论】：

【解决方案3】：

无需在循环中添加事件监听器。您可以使用事件委托。请改用on。

$(document).ready(function () {
    $("table").on('click', "tr.logtable-header", function () {
        var header_row = $(this).parent("logreader-header-row");
        $.ajax({
            type: 'POST',
            url: URL + 'admin/ajax_processor/getLog',
            data: {
                date: $(this).data("date")
            },
            success: function (response) {
                $(this).closest('.logreader-header-row').after(response);
                // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
            },
            error: function (request, status, error) {
                console.log(request);
                console.log(status);
                console.log(error);
            }
        });
    });
});

【讨论】：