Question

我有一个页面，其中包含多个具有唯一ID的表，这些表中填充了来自ajax调用的数据。在下面的代码中，我试图找出如何检测单击按钮的最近表，并仅将新数据附加到该表。我认为这可以使用jquery的.closest（）方法，但无法弄清楚如何做到这一点？这是一个小提琴here有人能告诉我吗？

[Server:server-one] 2016-10-25 19:28:53860 INFO  (SimpleIndexingProgressMonitor.java:71) HSEARCH000027: Going to reindex 9 entities

添加数据

<table id="myTable1">
  <tbody>
    <tr>
      <td>Info</td>
    </tr>
  </tbody>
</table>

添加数据 jquery

<table id="myTable2">
  <tbody>
    <tr>
      <td>Info</td>
    </tr>
  </tbody>
</table>

Answer 1

您可以使用DOM元素之间的关系。由于table紧跟anchor元素的兄弟，.next()函数可用于定位它。

$('a').click(function() {
   $(this).next('table').find('> tbody > tr').append('<td>info,</td>');
});

Fiddle

Answer 2

其他答案也是正确的，但这是另一种方法，使用data-attribute使用不引人注意的方式来判断与哪个表进行交互：

＆＃13;

$(document).ready(function() {
  $('a').click(function() {
    $("#" + $(this).data("table")).find('tbody > tr').append('<td>info,</td>');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:void(0);" data-table="myTable1">Add data</a>
<table id="myTable1">
  <tbody>
    <tr>
      <td>Info</td>
    </tr>
  </tbody>
</table>
<!----ANOTHE TABLE---->
<a href="javascript:void(0);" data-table="myTable2">Add data</a>
<table id="myTable2">
  <tbody>
    <tr>
      <td>Info</td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 3

您可以将表格和链接包装在div中，然后查看内部。

$('a').click(function() {
   $(this).parent().find('table > tbody > tr').append('<td>info,</td>');
});

Fiddle

使用此方法，如果您的按钮位于<table></table>代码的上方或下方，则不重要。

如何检测用Jquery点击哪个表？

3 个答案: