Question

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

e.g。点击“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来执行事件委派（您也可以在较新版本的jQuery中使用超重载on函数进行事件委派。）

这是一个简化的例子：

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

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

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

Live Example | Source

如果您更喜欢on到delegate，请更改

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

到

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

（请注意，参数的顺序已更改。）Live Example | Source

附注：

您可能希望等到内容加载后，在load回调触发之前不要将其放入DOM中。
你发送一个HTML片段到服务器似乎很奇怪（这就是load的第二个参数，如果它不是一个函数）。但是考虑到你发送给它的URL的名称，我认为它是正确的。： - ）

Answer 2

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

的引用

row.insertAfter($(this));

JS Fiddle demo

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

参考：

insertAfter()。

Answer 3

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

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

如何在选定的下方添加权限？

3 个答案: