0

I have 2 tables on a page at once. I want to only manipulate the bottom table through jQuery by adding a row below the row that is clicked. I've managed to figure out using this.rowIndex to add the extra row based on the <tr> tag being clicked. But when 2 tables are in the mix, it gets confusing.

I've tried using jQuery ID selectors based on the table ID's but it either doesn't work or only the top row of the table is clickable. I've tried #tableID > thead > tr","tr#tableID", "#tableID > tr, etc. The first one works but only for the top row.

I've dumbed it down to the simplest form I could get it in on my fiddle page. In it's current form here, only the top table works. How do I get it so only the bottom table works and have it also ignore the "header" row being clicked?

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>​

Thanks everyone!

4

3 回答 3

0

将您的点击功能更改为：

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

});​
于 2012-05-30T19:08:56.570 回答
0

我叉了你的小提琴，试试这个：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);
});
于 2012-05-30T19:09:08.853 回答
-1

这是一个更新的示例：

$('#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用标签包裹非标题行

于 2012-05-30T19:13:17.970 回答