0

1ページに一度に2つのテーブルがあります。クリックされた行の下に行を追加することによって、jQueryを介して一番下のテーブルを操作するだけです。クリックされたタグにthis.rowIndex基づいて行を追加するためにを使用することができました。<tr>しかし、2つのテーブルが混在していると、混乱します。

テーブルIDに基づいてjQueryIDセレクターを使用してみましたが、機能しないか、テーブルの一番上の行のみがクリック可能です。私は試しました#tableID > thead > tr","tr#tableID", "#tableID > tr、など。最初のものは機能しますが、一番上の行に対してのみ機能します。

私はそれを私のフィドルページに入れることができる最も単純な形に落とし込みました。ここでの現在の形式では、一番上のテーブルのみが機能します。一番下のテーブルだけが機能し、クリックされている「ヘッダー」行も無視するようにするにはどうすればよいですか？

コードはこちら

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

みんな、ありがとう！

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 に答える