Question

我一次在一个页面上有2个表。我想通过在单击的行下面添加一行来通过jQuery操作底部表。我已经设法使用this.rowIndex根据点击的<tr>标记添加额外的行。但是当混合使用2个表时，会让人感到困惑。

我已尝试使用基于表ID的jQuery ID选择器，但它要么不起作用，要么只能点击表的顶行。我已经尝试了#tableID > thead > tr","tr#tableID", "#tableID > tr等等。第一个可以使用但仅适用于顶行。

我把它简化为最简单的形式，我可以把它放在我的小提琴页面上。在这里它的当前形式，只有顶部表工作。我如何得到它，只有底部表工作，并让它忽略被点击的“标题”行？

Code is here

JavaScript的：

$('tr').click(function(){
    html = "<tr><td>Jquery</td><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td>";
    $('tr').eq(this.rowIndex).after(html); 
});

HTML：

<table  id="detail" border=1>
<thead>
  <tr>
    <td width="138px"><h5>Campaign Name</h5></td>
    <td width="5%"><h5>Invites Sent</h5></td>
    <td width="5%"><h5>Invites Opened</h5></td>
    <td><h5>Unique Visits</h5></td>
    <td><h5>Referrals Shared</h5></td>
    <td><h5>Inquiries</h5></td>
    <td><h5>Sales Generated</h5></td>
  </tr>
</thead>
    <tr>
        <td>Test1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>Test2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>        
</table>

<br />

<table  id="detail2" border=1>
<thead>
  <tr>
    <td width="138px"><h5>Campaign Name</h5></td>
    <td width="5%"><h5>Invites Sent</h5></td>
    <td width="5%"><h5>Invites Opened</h5></td>
    <td><h5>Unique Visits</h5></td>
    <td><h5>Referrals Shared</h5></td>
    <td><h5>Inquiries</h5></td>
    <td><h5>Sales Generated</h5></td>
  </tr>
</thead>
    <tr>
        <td>Test3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
    </tr>
    <tr>
        <td>Test4</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
    </tr>   
</table>

谢谢大家！

Answer 1

将您的点击功能更改为：

$('#detail2 tr:not(:first)').click(function(){
    html = "<tr><td>Jquery</td><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td>";
    $('#detail2 tr').eq(this.rowIndex).after(html);

});

Answer 2

我分叉你的小提琴，试试这个： http://jsfiddle.net/hyNdC/1/

如果分叉的jsFiddle不起作用，这是新的脚本：

$('tr').click(function(){
    html = "<tr><td>Jquery</td><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td>";
    $(this).after(html);
});

Answer 3

Here is an updated example：

$('#detail2 > tbody > tr').click(function() {
  html = "<tr><td>Jquery</td><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td>";
  $(this).after(html);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="detail" border=1>
  <thead>
    <tr>
      <td width="138px">
        <h5>Campaign Name</h5>
      </td>
      <td width="5%">
        <h5>Invites Sent</h5>
      </td>
      <td width="5%">
        <h5>Invites Opened</h5>
      </td>
      <td>
        <h5>Unique Visits</h5>
      </td>
      <td>
        <h5>Referrals Shared</h5>
      </td>
      <td>
        <h5>Inquiries</h5>
      </td>
      <td>
        <h5>Sales Generated</h5>
      </td>
    </tr>
  </thead>
  <tr>
    <td>Test1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Test2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
  </tr>
</table>

<br />

<table id="detail2" border=1>
  <thead>
    <tr>
      <td width="138px">
        <h5>Campaign Name</h5>
      </td>
      <td width="5%">
        <h5>Invites Sent</h5>
      </td>
      <td width="5%">
        <h5>Invites Opened</h5>
      </td>
      <td>
        <h5>Unique Visits</h5>
      </td>
      <td>
        <h5>Referrals Shared</h5>
      </td>
      <td>
        <h5>Inquiries</h5>
      </td>
      <td>
        <h5>Sales Generated</h5>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Test3</td>
      <td>3</td>
      <td>3</td>
      <td>3</td>
      <td>3</td>
      <td>3</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Test4</td>
      <td>4</td>
      <td>4</td>
      <td>4</td>
      <td>4</td>
      <td>4</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

如何才能获得它，只有底部表工作

将ID添加到您用于附加点击事件的选择器，如下所示：#detail2 > tbody > tr

并且还忽略了点击的“标题”行？

使用tbody标记

包裹非标题行

jQuery在屏幕上有多个表的特定索引之后添加行到表

3 个答案: