jQuery.eachの使い方について教えてください。

解決済

質問者：mr-r00
質問日時：2010/06/08 21:47
回答数：3件

jQuery.eachの使い方について教えてください。

やりたいことの目的として
テーブルの行に触れたとき背景色を変更したいということです。

ただ、ちょっとやっかいなのは１行に触れたら２行の色を変更させたいというところにあります。
tr1に触れたらtr1とtr2に着色
tr2に触れたらtr1とtr2に着色
tr3に触れたらtr3とtr4に着色
tr4に触れたらtr3とtr4に着色
・
・
・
といった感じです。

$(＠＠＠).hover(function(){
$(this).css({
backgroundColor:'#ff47a3',
color:'#ffffff'
});
},function(){
$(this).css({
backgroundColor:bgColor,
color:color
});
});
});
＠＠＠の部分をうまく配列で書く方法はないでしょうか？
配列を使えばいいかとおもうのですが・・・

通常2行を選択するのであれば
$('#tr1,#tr2').hoverでいいかと思ってはいますが・・・
配列ではどのようにしてあげたらいいのでしょうか？
よろしくお願いいたします。

<table>
<tr id=tr1>
<td></td><td></td>
</tr>
<tr id=tr2>
<td></td><td></td>
</tr>
<tr id=tr3>
<td></td><td></td>
</tr>
<tr id=tr4>
<td></td><td></td>
</tr>
<tr id=tr5>
<td></td><td></td>
</tr>
<tr id=tr6>
<td></td><td></td>
</tr>
</table>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： yyr446
回答日時：2010/06/09 10:20

$('tr:odd,tr:odd+tr').hover(function(){

じゃだめ
’奇数番目のTRとその隣接TR’

- 0
- 件

通報する

この回答へのお礼

これでも大丈夫でした
ありがとうございます

通報する

お礼日時：2010/06/09 22:17

No.3

回答者： steel_gray
回答日時：2010/06/09 11:31

２行が１セットである事に意味があるならtbodyで括っちゃえば？

<tbody>
<tr>～～</tr>
<tr>～～</tr>
</tbody>
<tbody>
<tr>～～</tr>
<tr>～～</tr>
</tbody>

$('tbody').hover(～

それとも実際にはもっと複雑で行ごとにidを振らなければ実現できないような構成？

- 0
- 件

通報する

この回答へのお礼

うまいことできました
ありがとうございます

通報する

お礼日時：2010/06/09 22:18

No.1

回答者： babu_baboo
回答日時：2010/06/08 23:09

ごめん！つくってからきづいた！「jQuery.eachの使い方」じゃなくてもだいじょうぶ？

<!DOCTYPE html>
<title></title>
<bod>
<table border="1">
<tr><th>abc</th><td>def</td></tr>
<tr><th>abc</th><td>def</td></tr>
<tr><th>abc</th><td>def</td></tr>
<tr><th>abc</th><td>def</td></tr>
<tr><th>abc</th><td>def</td></tr>
<tr><th>abc</th><td>def</td></tr>
<tr><th>abc</th><td>def</td></tr>
<tr><th>abc</th><td>def</td></tr>
</table>
<script type="text/javascript">
//@cc_on
document.
/*@if(@_jscript_version > 5.8)
　　addEventListener(
　@elif (@_jscript_version <= 5.8)
　　attachEvent('on' +
　@else@*/
　　addEventListener(
/*@end@*/
　'mousemove', (function( getp ) {
　　var tr0,tr1;
　　return function( e ) {
　　　var n = e./*@if(1)srcElement@else@*/target/*@end@*/;
　　　var tr = getp(n,'nodeName','TR');
　　　var b,tb;

　　　tr0 && (tr0.backgroundColor = '#fff', tr0 = null);
　　　tr1 && (tr1.backgroundColor = '#fff', tr1 = null);
　　　
　　　if(tr) {
　　　　tb=getp(tr,'nodeName','TABLE');
　　　　b = (tr.rowIndex / 2 |0) * 2;
　　　　(tr0 = tb.rows[b].cells[0].parentNode.style ).backgroundColor = '#ff47a3';
　　　　(tr1 = tb.rows[b+1].cells[0].parentNode.style ).backgroundColor = '#ff47a3';
　　　}
　　};
　})(function(n,t,v){
　　　return n?v==n[t]?n:arguments.callee(n.parentNode,t,v):null;
　　 }),false);
</script>