jquery - 如何在选定的下方添加右侧？

Question

我有一张桌子，想在我用鼠标单击的行下方添加一个加载的 ajax。但是我不知道如何获取索引，而是将其附加到末尾。

例如，单击“hol”，该行应插入“hol”行下方。

请看--> 小提琴 <--

<table id="tab_open_deals" class="table table-condensed table-striped cb_table-hover">
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
  </thead>
  <tbody id="search_result">
    <tr>
      <td>Lunch Deal- Light</td>
      <td>39.90</td>
      <td>29 Dec 2012</td>
    </tr>
  <tr>
    <td>hol</td>
    <td>1499.00</td>
    <td>8 Jan 2013</td>
  </tr>
 </tbody>
</table>


$(document).ready(function() {
    $('#tab_open_deals tbody tr').off('click').on('click', function() {
        var row = $('<tr/>');
        $(row).load('/echo/html/', {
            html: '<td class="override" colspan="4"><table class="table-striped sub_table-hover"><thead><tr><th>Sub1</th><th>Sub2</th></tr></thead><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table></td>'
        });

        $(this).parent().append(row);
    });
});

Answer 1

您不需要索引，只需获取对单击的引用tr（closest对此有好处）并使用after：

$('#tab_open_deals tbody tr').off('click').on('click', function() {
    var row = $('<tr/>');
    $(row).load('/echo/html/', {
        html: '<td class="override" colspan="4"><table class="table-striped sub_table-hover"><thead><tr><th>Sub1</th><th>Sub2</th></tr></thead><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table></td>'
    });

    $(this).closest("tr").after(row);
});

但是您挂钩事件的方式不会挂钩您添加的任何新行。您可能会考虑delegate，这是用于进行事件委托（您也可以on在较新版本的 jQuery 中使用超重载函数进行事件委托）。

这是一个简化的示例：

$("#theTable tbody").delegate("tr", "click", function() {
  var row = $("<tr><td></td></tr>");

  row.find("td").text("New row at " + new Date());

  $(this).after(row);
});

实例| 来源

或者，如果您愿意on，请delegate更改

$("#theTable tbody").delegate("tr", "click", function() {

到

$("#theTable tbody").on("click", "tr", function() {

（请注意，参数的顺序发生了变化。）Live Example | 来源

---

旁注：

• 不过，您可能希望等到内容加载完毕，在load回调触发之前不要将其放入 DOM 中。

• 您将 HTML 片段发送到load服务器似乎很奇怪（如果它不是函数，那就是第二个参数的作用）。但是考虑到您要发送到的 URL 的名称，我假设它是正确的。:-)

Answer 2

在您的函数的上下文中id， 或 索引是无关紧要的；只需使用对当前单击的引用tr：

row.insertAfter($(this));

JS 小提琴演示。

顺便说一句，row它已经是一个 jQuery 对象（因为您使用：创建它row = $('<tr />')），所以您不需要在下一行将它包装在一个 jQuery 对象中$(row).load(/*...*/)，只需使用：row.load(/*...*/)。

参考：

• insertAfter().

Answer 3

您正在寻找的是after(). 就像append()，但对于兄弟姐妹。

http://api.jquery.com/after/