4

現在の行にまたがる「行」のインデックスを取得する方法を見つけようとしています(行にまたがるセルであっても)。

<table>
    <tr>
        <td rowspan="2">First</td>
        <td> First 1 1 </td>
        <td> First 2 1 </td>
    </tr>
    <tr>
         <td> First 2 1 </td>
         <td> First 2 2 </td>
    </tr>
    <tr>
        <td rowspan="2">Second</td>
        <td> Second 1 1 </td>
        <td> Second 2 1 </td>
    </tr>
    <tr>
         <td> Second 2 1 </td>
         <td> Second 2 2 </td>
    </tr>
</table>

テーブル内の任意のセルをクリックした場合、現在どの「行にまたがる」行をカウントするにはどうすればよいですか?

たとえば、「2 番目」のセルのいずれかをクリックすると「2」が表示され、「最初」のセルのいずれかをクリックすると「1」が表示されます。

私はこれを含む複数のことを試しました：

row=$(this).parent().parent().children('tr').filter(function (index) {
    return $(this).children('td[rowspan]'); }).index($(this).parent());

と

row=$(this).parent().parent().children('tr:contains("td[rowspan]")')
    .parent().parent().index($(this).parent());

そして、一種のそれで動作するようになりました

$row=$(this).parent();
while ($row.children('td:eq(0)').attr("rowspan").length<=0)
    $row=$row.prev();
span=$row.children('td:eq(0)').attr("rowspan");
row=Math.floor( parseInt($(this).parent().parent().children().index( $(this).parent()) )/span );

しかし、これはrowspanセルがある場合にのみ機能します...そして、すべての行が同じrowspanを持っていると仮定しています

これらのサイトで作業を試みましたが、あまりうまくいきませんでした。


表示可能なテーブル行の数をカウントするjqueryセレクター?
JQuery: テーブルから行を選択する方法 jQuery でのテーブルの
行と列番号

4

3 に答える 3

3 
var table = $('table');                     // reference of table
$('td').click(function() {
  var perent = $(this).parent();            // find parent tr
      index= table.find(perent).index();    // get index of tr
   alert( index );
});

デモ

var table = $('table');
$('td').click(function() {
    var tdWithRowSpan = $(this).siblings('td[rowspan]').length ?  // if siblings td[rowspan] exists
                            $(this).siblings('td[rowspan]') :     // get that td
                              $(this).parent().prev('tr').find('td[rowspan]'); // else find closest td[rowspan]


    index = table.find('td[rowspan]').index(tdWithRowSpan); // get index
    alert(index);
});

デモ

于 2012-06-24T05:18:23.607 に答える
3

rowspan1 つの方法は、最初の列のセルの属性から配列を作成することです。そこから、クリックされた行のインデックスを取得し、rowspan配列を反復処理して、スパンのエクステントを差し引くことができます。ゼロを下回ると、(ゼロベースの) インデックスが作成されます。

$("td").click(function() {
    var $this = $(this);
    var rowIndex = $this.closest("tr").index();
    $this.closest("table").find("tr").map(function() {
        return $(this).find("td:first").attr("rowspan") || 1;
    }).each(function(index) {
        if ((rowIndex -= this) < 0) {
            alert(index + 1);  // 'index' is zero-based.
            return false;
        }
    });
});

この fiddleでテストできます。

于 2012-06-24T05:23:21.243 に答える
2

これがあなたが望むものかどうかはわかりません。しかし、あなたの人生を楽にするために、データ属性をマークアップに追加することを検討してください...

<table>
    <tr data-index="0">
        <td rowspan="2">First</td>
        <td> First 1 1 </td>
        <td> First 2 1 </td>
    </tr>
    <tr data-index="1">
         <td> First 2 1 </td>
         <td> First 2 2 </td>
    </tr>
    ...
</table>

これが整っていれば、値を取得するのは簡単です:

$(this).parent().attr("data-index");
于 2012-06-24T05:09:49.993 に答える