tableタグの指定された行全体または列全体に対して操作する方法

お世話になっております。

そこまで高度な内容じゃないかもしれないですが、行き詰まったので教えてください。
以下のようなレイアウトのtableをhtmlで描画したとします。

	ボタン1	ボタン2	ボタン3
ボタン4	sample1	sample2	sample3
ボタン5	sample4	sample5	sample6
ボタン6	sample7	sample8	sample9

ここでいう「ボタン」は<input type="button">のボタンです。
例えば「ボタン1」を押した時、「sample1」「sample4」「sample7」のセルに対して操作（css操作）を行いたいです。
同様に、例えば「ボタン4」を押した時、「sample1」「sample2」「sample3」に対して操作を行いたいです。
要は選択されたボタンの行（または列）を一直線に同じ操作ができればいいです。
jQueryを使用することを想定しています。
tdタグやtrタグがミソだと思っているのですが、なんともドツボにはまったので、スマートな解決策をご存知の方いらっしゃいましたらお力を貸してください。

何卒よろしくお願いいたします！

kei344

2017/10/18 14:33

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

行動規範の内容に同意します

回答1件

ベストアンサー

jQueryは、セレクタをキーにイベントさせるので、「行」または「列」をHTML構造上特定できれば、お望みの操作ができると思います。下記は、テキトーなサンプルです。

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4	<meta charset="UTF-8">
5	<title>Document</title>
6	<style>
7		.red {
8			color: red;
9		}
10	</style>
11	<script
12  src="https://code.jquery.com/jquery-2.2.4.min.js"
13  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
14  crossorigin="anonymous"></script>
15</head>
16<body>
17
18	<table>
19		<tr>
20			<th></th>
21			<th>
22				<button type="button" id="btn1">ボタン1</button>
23			</th>
24			<th>
25				<button type="button" id="btn2">ボタン2</button>
26			</th>
27			<th>
28				<button type="button" id="btn3">ボタン3</button>
29			</th>
30		</tr>
31		<tr id="line1">
32			<td class="column0"><button type="button" id="btn4">ボタン4</button></td>
33			<td class="column1">sample1</td>
34			<td class="column2">sample2</td>
35			<td class="column3">sample3</td>
36		</tr>
37		<tr id="line2">
38			<td class="column0"><button type="button" id="btn5">ボタン5</button></td>
39			<td class="column1">sample4</td>
40			<td class="column2">sample5</td>
41			<td class="column3">sample6</td>
42		</tr>
43		<tr id="line3">
44			<td class="column0"><button type="button" id="btn6">ボタン6</button></td>
45			<td class="column1">sample7</td>
46			<td class="column2">sample8</td>
47			<td class="column3">sample9</td>
48		</tr>
49	</table>
50
51
52<script>
53
54	$('#btn1').on('click', function() {
55		$('.column1').addClass('red');
56	});
57
58	$('#btn2').on('click', function() {
59		$('.column2').addClass('red');
60	});
61
62	$('#btn3').on('click', function() {
63		$('.column3').addClass('red');
64	});
65
66	$('#btn4').on('click', function() {
67		$('tr#line1 td').addClass('red');
68	});
69
70	$('#btn5').on('click', function() {
71		$('tr#line2 td').addClass('red');
72	});
73
74	$('#btn6').on('click', function() {
75		$('tr#line3 td').addClass('red');
76	});
77
78</script>
79
80</body>
81</html>