同じクラス名のテーブルに別々の処理をしたい

Question

前提・実現したいこと

HTMLのテーブルで、マウスオーバーした際に行と列の背景色が変わるようにしたいのですが、同じページ内に同じクラス名（.stripeTable）のテーブルが複数あると、マウスオーバーしていないテーブルにも影響を与えてしまいます。
背景色の変更は、ページ内にテーブルが１つしかない時にはうまく反映されています。
最悪、各テーブルごとにIDかクラス名を変えて、それぞれに対応したスクリプトを用意すれば対応できるのでしょうが、eachや$(this)などを使ってうまくやれるのではないかというところで行き詰まっております。
よい対処方法がありましたらよろしくお願いいたします。

【追記】
テーブルは1行目の<tr>内は全て<th>
2行目以降は<tr>内の最初だけ<th>で、残りは全て<td>にしているため、
スクリプトのnth-child()内で-1や+2で調整しています。
上記の条件であれば、セルが増えてもマウスオーバー時には十字方向にセルの背景色が変わるのですが、
ページ内に同じクラス名のテーブルが増えると、狂ってきます。

発生している問題・エラーメッセージ

エラーメッセージはなし

該当のソースコード

$(function(){

	$(".stripeTable tr").mouseover(function(){
		$(this).addClass("hover");
	}).mouseout(function(){
		$(this).removeClass("hover");
	});
	
	$(".stripeTable tr td").mouseover(function(){
		$(".stripeTable tr td:nth-child("+($(".stripeTable tbody tr td").index(this)%($(".stripeTable thead tr th").size()-1)+2)+")").addClass("hover");
	}).mouseout(function(){
		$(".stripeTable tr td:nth-child("+($(".stripeTable tbody tr td").index(this)%($(".stripeTable thead tr th").size()-1)+2)+")").removeClass("hover");
	});

});

<table class="stripeTable">
<thead>
<tr>
<th></th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>2</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>3</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>4</th>
<td></td>
<td></td>
<td></td>
</tbody>
</table>

tr.hover td,
td.hover {
	background-color: lightyellow;
}

試したこと

eachや$(this)などを使ってみたのですが、まだ習得不足のこともあり、自力では解決できませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

よく質問文が読めていないかもですが、とりあえずeachを使っての書き方です。

$( ".stripeTable" ).each( function() {
	var $_t = $( this );
	$_t.find("td").mouseover( function() {
		$_t.find("td:nth-child("+($_t.find("td").index(this)%($_t.find("th").size()-1)+2)+")").addClass("hover");
	} ).mouseout( function() {
		$_t.find("td:nth-child("+($_t.find("td").index(this)%($_t.find("th").size()-1)+2)+")").removeClass("hover");
	} );
} );

---

追記：

さっきのは元のコードを少し変更しただけでテストしていなかったのですが、いまいち挙動がおかしかったので、取り急ぎ修正しました。

$( ".stripeTable" ).each( function() {
    var $_t = $( this );
    $_t.find("td").mouseover( function() {
        $_t.find("td:nth-child("+($( this ).parent().children().index(this)+1)+")").addClass("hover");
    } ).mouseout( function() {
        $_t.find("td:nth-child("+($( this ).parent().children().index(this)+1)+")").removeClass("hover");
    } );
} );
```**動くサンプル：**[https://jsfiddle.net/eoy13q8o/](https://jsfiddle.net/eoy13q8o/)

---

ちなみに`.size()`はjQuery3で削除されているので使うなら`.length`を使いましょう。

【.size() | jQuery API Documentation】
[http://api.jquery.com/size/](http://api.jquery.com/size/)
> version deprecated: 1.8, removed: 3.0

Comments

[退会済みユーザー]

:odd :even を使うともっと短く記述できませんか？

[kei344]

To: Kosuke_Shibuyaさん
たぶん縦列にクラスhoverを付けたいのだと思うので、2列以上ある場合を考えると:odd :even を使う方法を思いつきませんでした。

[HIROYUKI.I]

この度はお世話になります。
ご回答ありがとうございます。
提示いただいたスクリプトをコピペして試してみたのですが、
背景色の変化が見られませんでした。
しかしデモを拝見したところでは理想通りの動きになっているので、
こちらのCSS側の問題なのか今検討しています。
こちらの質問内容を少し追記しましたので、
引き続きよろしければお力お貸しください。

[kei344]

https://jsfiddle.net/eoy13q8o/2/
テーブル構造とCSSを例示されたものにあわせました。
ちなみにjQueryは3.1.1です。

[HIROYUKI.I]

返信ありがとうございます。
ご提示いただいた内容を理解しながら確認してみます。
時間がかかるかもしれませんが、解決後はまた告知いたします。

Answer 2

こんにちは。

一行目の <tr> のセルは、 <th> であるという前提つきになってしまいますが、
こんな感じでも出来ました。

$(function() {
 
 $('.stripeTable').each(function(){
    var table = this;
    var num_cols = $('th', table).size();
    var num_tds = $('td', table).size();
    
    $('td', table).each(function(i){
      
        $(this).on('mouseover mouseout',
            function(e) {
                var method = `${e.type == 'mouseover' ? 'add':'remove'}Class`;
      	        $(this).parent()[method]('hover');	// 行の背景色を変更
                  for (var j=(i+1) % num_cols; j <= num_tds; j += num_cols) // 列の背景色を変更
                    $(`td:nth-of-type(${j})`, table)[method]('hover');       
            }
        );
        
    });
 });
});

以下は、上記の検証のためのデモです。

https://jsfiddle.net/jun68ykt/nsxrtded/69/

一行目のセルも <td>である場合は、

 var num_cols = $('th', table).size();

の部分を適宜、修正します。
以上参考になれば幸いです。

---

補足

ご質問のコードでも使われている、 index() を使えば、 <td>についてeach
しなくてもよくなり、以下のようになります。

https://jsfiddle.net/jun68ykt/nsxrtded/86/

Comments

[HIROYUKI.I]

この度はお世話になります。
ご回答ありがとうございます。
提示いただいたスクリプトをコピペして試してみたのですが、
背景色の変化が見られませんでした。
しかしデモを拝見したところでは理想通りの動きになっているので、
こちらのCSS側の問題なのか今検討しています。
こちらの質問内容を少し追記しましたので、
引き続きよろしければお力お貸しください。

[jun68ykt]

このようなテーブルだとすると、th ではない、データセルの列数の
このようなテーブルだとすると、th ではない、データセルの列数の
算出を以下のようにすればよいと思います。

var num_cols = $('th', $('tr', table).get(0)).size() - 1; // => 3

以下、追記された HTML と CSS を反映したものです。

https://jsfiddle.net/jun68ykt/nsxrtded/113/

[jun68ykt]

または、２行目の td を数えればよいので

var num_cols = $('td', $('tr', table).get(1)).size();

でもよいですね。

[HIROYUKI.I]

返信ありがとうございます。
ご提示いただいた内容を理解しながら確認してみます。
時間がかかるかもしれませんが、解決後はまた告知いたします。

Answer 3

お世話になります。
改めての返信が遅くなりまして申し訳ございません。
実は回答いただいた後に、基礎からスクリプトを学び直していたのですが、
現時点でもご回答いただいたスクリプトを完全に読み解けていないのが正直なところです。

しかし2つめにご提示いただいた内容（https://jsfiddle.net/jun68ykt/nsxrtded/113/）が、
まさに求めていたものでした。
コピペしてためしてみたところ反映されなかったのですが、
ご提示いただいているjQueryのバージョンが2.2.4であることに気付き、
バージョンを揃えたところ、複数のテーブルがあるページでもうまく反映されました。

ちなみに、こちらが提示しましたソースコードの流れでをeachを使って改良することは可能でしょうか。
$(".stripeTable tr)と$(".stripeTable tr td")についてeachで囲めばうまくいきそうなのですが、
そこで行き詰まってしまいます（そもそも考え方がダメなのかもしれまでんが）。
こちらが提示したコードはjQueryの入門書にあったものを参考にしたのですが、
掲載されているものは、あくまでもひとつのページにクラス名がついたテーブルがひとつという条件だったので、複数テーブルがある場合を探っていたところです。

いずれにしましても、現状は解決していただきましたので、感謝申し上げます。

Comments

[kei344]

もしかして内容をエディタで作ってコピー＆ペースしていませんか？teratail のバグで記述内容が表示されないというものが以前有ったので、ペースト後に何文字か記入してみてください。