javascript セレクターの指定方法を教えて下さい。

下記の<TABLE>に配置した<FORM>で最後の列にあるinput[radio]を選択された際に同じ行にあるinputの値を変更したいと考えています、
具体的には一行全てのinputの値を消したり・入力済みの行の間に空欄の行を挿入したりとか..
私的にはこれから色々難しい問題に挑戦する事になると思いますが、
指し当って今直面しているのは同じ行で他の<td>の中にある<input>要素を指定する方法が解かりません。
宜しくお願い致します。

HTML
1	<table id="quotation">
2	<form >
3		<tr>
4			<th>No</th><th>適用</th><th>数量</th><th>単価</th><th>合計</th><th>操作</th>
5		</tr>
6
7		<tr class="quotation">
8			<td>1</td>
9			<td><input type="text" class="item" name="item[]" value="" /></td>
10			<td><input type="number" class="num" name="num[]" value="" /></td>
11			<td><input type="number" class="per" name="per[]" value="" /></td>
12			<td> <input class="subtotal par" id="subtotal1" type="number" val="" disabled="disabled" value="" style="text-align:right;"/></td>
13			<td>
14				<div class="cogs_inner">
15					<label title="操作1">	<input class="control" type="radio" value="1" /></label>
16					<label title="操作2">	<input class="control" type="radio" value="2" /></label>
17					<label title="操作3">	<input class="control" type="radio" value="3" /></label>
18					<label title="操作4">	<input class="control" type="radio" value="4" /></label>
19				</div>
20			</td>
21		</tr>
22
23		<tr class="quotation">
24			<td>2</td>
25			<td><input type="text" class="item" name="item[]" value="" /></td>
26			<td><input type="number" class="num" name="num[]" value="" /></td>
27			<td><input type="number" class="per" name="per[]" value="" /></td>
28			<td> <input class="subtotal par" id="subtotal2" type="number" val="" disabled="disabled" value="" style="text-align:right;"/></td>
29			<td>
30				<div class="cogs_inner">
31					<label title="操作1">	<input class="control" type="radio" value="1" /></label>
32					<label title="操作2">	<input class="control" type="radio" value="2" /></label>
33					<label title="操作3">	<input class="control" type="radio" value="3" /></label>
34					<label title="操作4">	<input class="control" type="radio" value="4" /></label>
35				</div>
36			</td>
37		</tr>
38
39		<tr class="quotation">
40			<td>3</td>
41			<td><input type="text" class="item" name="item[]" value="" /></td>
42			<td><input type="number" class="num" name="num[]" value="" /></td>
43			<td><input type="number" class="per" name="per[]" value="" /></td>
44			<td> <input class="subtotal par" id="subtotal3" type="number" val="" disabled="disabled" value="" style="text-align:right;"/></td>
45			<td>
46				<div>
47					<label title="操作1">	<input class="control" type="radio" value="1" /></label>
48					<label title="操作2">	<input class="control" type="radio" value="2" /></label>
49					<label title="操作3">	<input class="control" type="radio" value="3" /></label>
50					<label title="操作4">	<input class="control" type="radio" value="4" /></label>
51				</div>
52			</td>
53		</tr>
54	</form >
55	</table>
56

Javascript
1	$( '.control' ).change( function() {
2		var control = parseInt($( this ).val());
3		switch(control){
4			case 1:
5              //既にここでつまずいちゃってます(=´；ω；｀=)
6			 //$(this).closest("tr input.item").css("background","red");
7			;
8			break;
9			case 2:
10			;
11			break;
12			case 3:
13			;
14			break;
15			case 4:
16			;
17			break;
18		}
19	});
20

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

回答2件

下記コードでどうでしょうか。

Create a new fiddle - JSFiddle

HTML
1<style>
2label {
3  display: block;
4}
5</style>
6</head>
7<body>
8<form>
9  <table id="quotation">
10    <tr>
11      <th>No</th><th>適用</th><th>数量</th><th>単価</th><th>合計</th><th>操作</th>
12    </tr>
13
14    <tr class="quotation">
15      <td>1</td>
16      <td><input type="text" class="item" name="item[]" value="" /></td>
17      <td><input type="number" class="num" name="num[]" value="" /></td>
18      <td><input type="number" class="per" name="per[]" value="" /></td>
19      <td> <input class="subtotal par" id="subtotal1" type="number" val="" disabled="disabled" value="" style="text-align:right;"/></td>
20      <td>
21        <div class="cogs_inner">
22          <label>操作1 <input class="control" type="radio" value="1" /></label>
23          <label>操作2 <input class="control" type="radio" value="2" /></label>
24          <label>操作3 <input class="control" type="radio" value="3" /></label>
25          <label>操作4 <input class="control" type="radio" value="4" /></label>
26        </div>
27      </td>
28    </tr>
29
30    <tr class="quotation">
31      <td>2</td>
32      <td><input type="text" class="item" name="item[]" value="" /></td>
33      <td><input type="number" class="num" name="num[]" value="" /></td>
34      <td><input type="number" class="per" name="per[]" value="" /></td>
35      <td> <input class="subtotal par" id="subtotal2" type="number" val="" disabled="disabled" value="" style="text-align:right;"/></td>
36      <td>
37        <div class="cogs_inner">
38          <label>操作1 <input class="control" type="radio" value="1" /></label>
39          <label>操作2 <input class="control" type="radio" value="2" /></label>
40          <label>操作3 <input class="control" type="radio" value="3" /></label>
41          <label>操作4 <input class="control" type="radio" value="4" /></label>
42        </div>
43      </td>
44    </tr>
45
46    <tr class="quotation">
47      <td>3</td>
48      <td><input type="text" class="item" name="item[]" value="" /></td>
49      <td><input type="number" class="num" name="num[]" value="" /></td>
50      <td><input type="number" class="per" name="per[]" value="" /></td>
51      <td> <input class="subtotal par" id="subtotal3" type="number" val="" disabled="disabled" value="" style="text-align:right;"/></td>
52      <td>
53        <div>
54          <label>操作1 <input class="control" type="radio" value="1" /></label>
55          <label>操作2 <input class="control" type="radio" value="2" /></label>
56          <label>操作3 <input class="control" type="radio" value="3" /></label>
57          <label>操作4 <input class="control" type="radio" value="4" /></label>
58        </div>
59      </td>
60    </tr>
61  </table>
62</form>
63
64<script>
65'use strict';
66jQuery('.control').change( function () {
67  switch (Number(this.value)){
68    case 1:
69      jQuery(this).closest('tr').find('input.item').css('background-color', 'red');
70    ;
71    break;
72    case 2:
73    ;
74    break;
75    case 3:
76    ;
77    break;
78    case 4:
79    ;
80    break;
81  }
82});
83</script>

修正点がいくつか。

<label title="操作1"> からtitle属性を削除してラベルテキストを付けました。title属性はラベルではないのでラベルをつけないなら <input> に付けてください。
parseInt($( this ).val()) は jQuery API を経由せずとも書ける為、Number(this.value) に変更しました
<table id="quotation"><form> は文法違反なので <form><table id="quotation"> に変更しました

Re: Sora-tan さん

投稿2016/01/12 02:41

think49

総合スコア18162

think49

2016/01/12 02:42

回答を考えている内に解決したようですね…。

退会済みユーザー

2016/01/12 05:39 編集

お礼が遅れてすみません！ご回答と他にも教えて頂いてすごく勉強になります。ありがとうございます。これからも宜しくお願い致します(*^^*)

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

ベストアンサー

これでいかがですか。

JavaScript
1// $(this).closest("tr input.item").css("background", "red");
2$(this).closest("td").find("input").css("background", "red");

投稿2016/01/11 20:57

退会済みユーザー

総合スコア0

退会済みユーザー

2016/01/12 02:00

お礼が遅くなりましてすみません closest()とfind()を組み合わせられるんですね closest(tr)で出来ました　..ありがとうございました

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

javascript セレクターの指定方法を教えて下さい。

関連した質問