-1

現在、私は2回クリックした場所でtdsを強調表示できるようにしたいテーブルのjqueryを使用しています。たとえば、任意の td をクリックすると、テーブル内のその td が強調表示されます。列のさらに下にある別の td をクリックすると、中央もすべて強調表示されます。別の列の別の td をクリックすると、前の列が削除され、最初からやり直す必要があります。現在、jquery で .find を使用して調査しましたが、役に立ちませんでした。私が考えることができる唯一のオプションは、IDをtdにハードコーディングし、個別に色付けすることです。これは効率的なコーディングではないと思います。助けていただければ幸いです。ありがとう

<table>
<tr>
<td><td><td>
<td><td><td>
<td><td><td>
<td><td><td>
</tr>
</table>
4

1 に答える 1

0

いいえ、ハードコーディングする必要はありません。（td-clickハンドラーで）この要素の一部の兄弟がすでに強調表示されていることを確認するだけです。たとえば、クラス'.highlight'を割り当てると、クエリは次のようになります。

$(this).siblings('.highlight');

...これは、強調表示されている同じ行の要素のみを返します。

更新：質問を読み間違え、実際に横の列を強調表示する必要があると考えました。垂直方向で作業する必要がある場合は、クエリにいくつか追加indexしnth-childます。

$('td').click(function() {
  var $this = $(this),
      index = $this.index();
  var $columnCells = $this.parents('table')
                          .find('tr td:nth-child(' + (index + 1) + ')');
  $columnCells.toggleClass('highlight');
});

デモ。

更新＃2：完全なcol-highlightingコードの（確かに、少し大まかな）例は次のとおりです。

$('td').click(function() {
  var $this = $(this),
      index = $this.index(),
      $table = $this.parents('table'),
      $rows  = $table.find('tr'),
      $columnCells = $rows.find('td:nth-child(' + (index + 1) + ')');
  var $hiCells = $columnCells.filter('.highlight');
  if ($hiCells.length) {
       var thisRowIndex = $this.parent().index(),
           $firstHiRow = $( $hiCells[0] ).parent(),
           firstHiIndex = $firstHiRow.index(),
           $lastHiRow  = $( $hiCells[$hiCells.length - 1] ).parent(),
           lastHiIndex = $lastHiRow.index();
      if (thisRowIndex > lastHiIndex) {
          $rows.slice(lastHiIndex, thisRowIndex + 1)
               .find('td:nth-child(' + (index + 1) + ')').addClass('highlight');
      } else if (thisRowIndex < firstHiIndex) {
          $rows.slice(thisRowIndex, firstHiIndex)
               .find('td:nth-child(' + (index + 1) + ')')
               .addClass('highlight');
      }
  } else {
      $table.find('td').removeClass('highlight');
      $this.addClass('highlight');
  }
});

デモ。

ご覧のとおり、セルがクリックされるたびに、列内のすべてのセルが取得され、それらのハイライト状態が確認されます。それらのいくつかが強調表示されている場合、最初と最後に強調表示された行を取得し、基本的に同じ操作を実行します。1）クリックされた行と最後に強調表示された行の間にあるすべての行を取得します。2）同じ列のすべてのセルを取得し、3）'em！をマークします。この列で強調表示されているセルがない場合は、強調表示セットを削除してから、クリックしたセルを強調表示します。

ただし、すべての列番号がキャッシュされている場合（たとえば、「data-column」属性を使用）、これはかなり合理化できます。しかし、一般的な方法はまだ同じだと思います。

于 2012-09-25T15:37:07.937 に答える