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

我有一个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>

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>

但我无法在单击后插入响应：

---

我做错了什么？

日志读取器标题行是一个类，这意味着要选择它，您需要在它前面加一个
字符（the）

否则，此处的代码正在搜索
元素。
日志读取器标题行是一个类，意味着要选择它，您需要在它前面加上
字符（the）

否则，此处的代码将搜索
元素。
您需要在
父级（）
调用中包含类选择器：
父级（'.logreader头行'）
（注意
）

也就是说，在这种情况下，最好使用
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);
        }
    });
});

您需要在
parent（）
调用中包含类选择器：
parent（'.logreader头行'）
（注意
）

也就是说，在这种情况下，最好使用
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);
        }
    });
});

无需在循环中添加事件侦听器。您可以使用事件委派。改为在
上使用

$(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);
            }
        });
    });
});

无需在循环中添加事件侦听器。您可以使用事件委派。改为在
上使用

$(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);
            }
        });
    });
});

类点在
var header_row=$（this.parent（“logreader header row”）为什么需要.on（'click'）in.each（）；我认为它是无用的
$（“.logtable header”）。在（“click”，function（）上{…
将为所有td元素注册具有所述类的事件，因此无需在此处循环。您可以通过将单击处理程序附加到
tr.logreader-header-row
元素而不是它们唯一的
td
。类点在
var header\u row=$（this.parent（“logreader header row”）处缺失；
为什么需要.on（'click'）内的.each（）；我认为它是无用的
$（.logtable header”）。on（'click'，function（）{…
将为具有所述类的所有td元素注册事件，因此无需在此循环。您可以通过将单击处理程序附加到
tr.logreader-header-row
元素而不是它们唯一的
td
来简化。
$(".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);
        }
    });
});

$(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);
            }
        });
    });
});