-1

jqueryを使用して、onclick関数内の行のテーブルヘッダーと最初の要素を見つける必要があります。

$(document).ready(function(){
$(".items").delegate("tr", "dblclick", function(data){
    alert(data.target.innerHTML);
    alert($(this).find('td:eq(0)').html());

});
});

以下のコードは、選択した行の内側のhtmlと最初の要素を私に与えています。クリックしたセルにも対応するテーブルヘッダーを取得する必要があります。

以下のコードを dblclick 関数内に入れてみましたが、渡されたインデックスが間違っていると思います。どうすれば正しいインデックスを取得できますか?

var headerValue= $(this).closest("table").find('th').eq($(this).index());
    alert(headerValue.text());

html テーブル:

<table class="items">
<thead>
<tr>
<th id="sku-grid_c1">Name</th><th id="sku-grid_c2">Active</th><th id="sku-grid_c3">Date Created</th><th id="sku-grid_c4">Date Updated</th><th id="sku-grid_c5">Code</th><th id="sku-grid_c6">Price</th><th id="sku-grid_c7">Shipping</th><th id="sku-grid_c8">Max Qty</th><th class="button-column" id="sku-grid_c9">&nbsp;</th></tr>
</thead>
<tbody>
<tr class="odd">
<td>fbdh</td><td>yes</td><td>&nbsp;</td><td>&nbsp;</td><td>t67r6r7t6t</td><td>23</td><td>12</td><td>12</td></tr>
<tr class="even">
<td>bfhewfbuh</td><td>yes</td><td>&nbsp;</td><td>&nbsp;</td><td>678ty78tg</td><td>56</td><td>7</td><td>6</td></tr>
<tr class="odd">
<td>cdbj</td><td>no</td><td>&nbsp;</td><td>&nbsp;</td><td> hudhqu</td><td>12</td><td>12</td><td>1</td></tr>
<tr class="even">
<td>guyguyf</td><td>yes</td><td>&nbsp;</td><td>&nbsp;</td><td>678gy8t</td><td>56</td><td>56</td><td>6</td></tr>
</tbody>
</table>
4

2 に答える 2

0

したがって、テーブル ヘッダーと最初のセルを表示する必要があります。

多分これはあなたのために働くでしょう：

http://jsfiddle.net/MM5un/

HTML

<table class="display">
    <thead>
        <tr>
            <th>Hello 1</th>
            <th>Hello2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 - Cell 1</td>
            <td>Row 1 - Cell 2</td>
        </tr>
        <tr>
            <td>Row 2 - Cell 1</td>
            <td>Row 2 - Cell 2</td>
        </tr>
    </tbody>
</table>

<div class="showFirstTD"></div>
<div class="tableHeader"></div>

JS

var tableHeader = $('.display thead').html();

$('.display tbody tr').on('click',function(){
    $('.showFirstTD').html($(':first-child', this).text());
    $('.tableHeader').html(tableHeader);
});
于 2013-01-28T23:35:34.710 に答える
0

これはあなたが求めているものですか？ http://jsfiddle.net/sXFRu/

HTML:

<table class="items" id="mytable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Last Name</th>
      <th>City</th>
      <th>State</th>
    </tr>
  </thead>
  <tbody>
    <tr class="odd">
      <td>Joe</td>
      <td>Doe</td>
      <td>Boston</td>
      <td>MA</td>
    </tr>

    <tr class="even">
      <td>John</td>
      <td>Smith</td>
      <td>New York</td>
      <td>NY</td>
    </tr>    
  </tbody>
</table>

jQuery:

var tds = $('#mytable').find('td');
var ths = $('#mytable').find('th');
var td;


$('#mytable').on('dblclick', 'td', function() {
   td = $(this);

   tds.removeClass('highlight');
   ths.removeClass('highlight');

   td.addClass('highlight');
   ths.eq(td.index()).addClass('highlight');
});
于 2013-01-28T23:56:09.830 に答える