質問編集履歴
3
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -52,6 +52,11 @@
|
|
|
52
52
|
やりたい事は
|
|
53
53
|
「select1」、「select2」、「select3」が全て埋まったら
|
|
54
54
|
「result」に結果を表示させる事です。
|
|
55
|
+
「select1」が「blue」、
|
|
56
|
+
「select2」が「dot」、
|
|
57
|
+
「select3」が「white」という選択だった場合、
|
|
58
|
+
<td colspa="2" id="result"> </td>の中身に「青背景に白ドット」というテキストを表示させたいです。
|
|
59
|
+
結果についてはif文で条件を書き、テキスト変換し<td>の中にjQueryで書き込む事を希望しています。
|
|
55
60
|
|
|
56
61
|
また常に「select1」、「select2」、「select3」を監視し、
|
|
57
62
|
変更があるたびに「result」に結果を書き換えたいです。
|
2
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
|
|
32
32
|
条件はそれぞれtableの一覧から取得したく、その部分のjQueryは以下のように記述し、
|
|
33
33
|
それぞれのセルから値の取得は出来ております。
|
|
34
|
+
外部読み込みしている「js.js」の中身は以下になります。
|
|
34
35
|
```jQuery
|
|
35
36
|
$(function() {
|
|
36
37
|
$('.bgColor').on('click',function(){
|
|
@@ -63,33 +64,55 @@
|
|
|
63
64
|
失礼致しました。追記致します。
|
|
64
65
|
jQueryでのtableセルから情報を取得している部分は以下になります。
|
|
65
66
|
```html
|
|
67
|
+
<!DOCTYPE html>
|
|
68
|
+
<html>
|
|
69
|
+
<head>
|
|
70
|
+
<meta charset="utf-8">
|
|
71
|
+
<title></title>
|
|
72
|
+
<link rel="stylesheet" href="/test/style.css">
|
|
73
|
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
|
74
|
+
<script type="text/javascript" src="/test/js.js"></script>
|
|
75
|
+
</head>
|
|
76
|
+
|
|
77
|
+
<body>
|
|
66
|
-
<table>
|
|
78
|
+
<table>
|
|
67
|
-
|
|
79
|
+
<tr>
|
|
68
|
-
|
|
80
|
+
<th>bgColor</th>
|
|
69
|
-
|
|
81
|
+
<td class="bgColor">red</td>
|
|
70
|
-
|
|
82
|
+
<td class="bgColor">pink</td>
|
|
71
|
-
|
|
83
|
+
<td class="bgColor">yellow</td>
|
|
72
|
-
|
|
84
|
+
<td class="bgColor">brown</td>
|
|
73
|
-
|
|
85
|
+
<td class="bgColor">blue</td>
|
|
74
|
-
|
|
86
|
+
<td class="bgColor">black</td>
|
|
75
|
-
|
|
87
|
+
</tr>
|
|
76
|
-
|
|
88
|
+
<tr>
|
|
77
|
-
|
|
89
|
+
<th>bgPattern</th>
|
|
78
|
-
|
|
90
|
+
<td class="bgPattern">dot</td>
|
|
79
|
-
|
|
91
|
+
<td class="bgPattern">check</td>
|
|
80
|
-
|
|
92
|
+
<td class="bgPattern">border-x</td>
|
|
81
|
-
|
|
93
|
+
<td class="bgPattern">border-y</td>
|
|
82
|
-
|
|
94
|
+
<td class="bgPattern">heart</td>
|
|
83
|
-
|
|
95
|
+
<td class="bgPattern">star</td>
|
|
84
|
-
|
|
96
|
+
</tr>
|
|
85
|
-
|
|
97
|
+
<tr>
|
|
86
|
-
|
|
98
|
+
<th>patternColor</th>
|
|
87
|
-
|
|
99
|
+
<td class="patternColor">white</td>
|
|
88
|
-
|
|
100
|
+
<td class="patternColor">gray</td>
|
|
89
|
-
|
|
101
|
+
<td class="patternColor">aqua</td>
|
|
90
|
-
|
|
102
|
+
<td class="patternColor">green</td>
|
|
91
|
-
|
|
103
|
+
<td class="patternColor">orange</td>
|
|
92
|
-
|
|
104
|
+
<td class="patternColor">purple</td>
|
|
93
|
-
|
|
105
|
+
</tr>
|
|
94
|
-
</table>
|
|
106
|
+
</table>
|
|
107
|
+
|
|
108
|
+
<table>
|
|
109
|
+
<tr><td colspa="2" id="result"></td></tr>
|
|
110
|
+
<tr><td>条件1</td><td id="select1"></td></tr>
|
|
111
|
+
<tr><td>条件2</td><td id="select2"></td></tr>
|
|
112
|
+
<tr><td>条件3</td><td id="select3"></td></tr>
|
|
113
|
+
</table>
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
</body>
|
|
117
|
+
</html>
|
|
95
118
|
```
|
1
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -56,4 +56,40 @@
|
|
|
56
56
|
変更があるたびに「result」に結果を書き換えたいです。
|
|
57
57
|
|
|
58
58
|
出来れば結果表示などのボタン(on.click)は使用せず
|
|
59
|
-
tableの条件を選択すると自動的に結果が変わるようにしたいです。
|
|
59
|
+
tableの条件を選択すると自動的に結果が変わるようにしたいです。
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
失礼致しました。追記致します。
|
|
64
|
+
jQueryでのtableセルから情報を取得している部分は以下になります。
|
|
65
|
+
```html
|
|
66
|
+
<table>
|
|
67
|
+
<tr>
|
|
68
|
+
<th>bgColor</th>
|
|
69
|
+
<td class="bgColor">red</td>
|
|
70
|
+
<td class="bgColor">pink</td>
|
|
71
|
+
<td class="bgColor">yellow</td>
|
|
72
|
+
<td class="bgColor">brown</td>
|
|
73
|
+
<td class="bgColor">blue</td>
|
|
74
|
+
<td class="bgColor">black</td>
|
|
75
|
+
</tr>
|
|
76
|
+
<tr>
|
|
77
|
+
<th>bgPattern</th>
|
|
78
|
+
<td class="bgPattern">dot</td>
|
|
79
|
+
<td class="bgPattern">check</td>
|
|
80
|
+
<td class="bgPattern">border-x</td>
|
|
81
|
+
<td class="bgPattern">border-y</td>
|
|
82
|
+
<td class="bgPattern">heart</td>
|
|
83
|
+
<td class="bgPattern">star</td>
|
|
84
|
+
</tr>
|
|
85
|
+
<tr>
|
|
86
|
+
<th>patternColor</th>
|
|
87
|
+
<td class="patternColor">white</td>
|
|
88
|
+
<td class="patternColor">gray</td>
|
|
89
|
+
<td class="patternColor">aqua</td>
|
|
90
|
+
<td class="patternColor">green</td>
|
|
91
|
+
<td class="patternColor">orange</td>
|
|
92
|
+
<td class="patternColor">purple</td>
|
|
93
|
+
</tr>
|
|
94
|
+
</table>
|
|
95
|
+
```
|