回答編集履歴
2
ソースコードの修正
answer
CHANGED
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
}).get();
|
|
114
114
|
|
|
115
115
|
// 入力とのマッチチェック関数
|
|
116
|
-
const textMatched = (elem, searchElm) => {
|
|
116
|
+
const textMatched = (elem, searchElm, name) => {
|
|
117
117
|
const reg = new RegExp(name);
|
|
118
118
|
return reg.test($(elem).find(searchElm).text())
|
|
119
119
|
}
|
|
@@ -150,7 +150,7 @@
|
|
|
150
150
|
// 全ての要素に対して入力とのマッチをチェック → name==''なら必ずtrue
|
|
151
151
|
// 初期値 : name == "" で、matchTextElementの要素の判定を||でつなげていく
|
|
152
152
|
const matchText = matchTextArray.reduce((acc, currentValue) =>
|
|
153
|
-
acc || textMatched(this, currentValue), name == "")
|
|
153
|
+
acc || textMatched(this, currentValue, name), name == "")
|
|
154
154
|
|
|
155
155
|
// 全ての要素に対してチェックボックスとのマッチをチェック
|
|
156
156
|
const matchCheck = matchCheckArray.reduce((acc, currentValue) =>
|
1
ソースコードの修正
answer
CHANGED
|
@@ -106,59 +106,60 @@
|
|
|
106
106
|
```
|
|
107
107
|
|
|
108
108
|
```javascript
|
|
109
|
+
// チェックボックスの取得
|
|
110
|
+
const getCheckBox = (searchElem) =>
|
|
111
|
+
$(searchElem).map(function() {
|
|
112
|
+
return $(this).val()
|
|
113
|
+
}).get();
|
|
114
|
+
|
|
115
|
+
// 入力とのマッチチェック関数
|
|
116
|
+
const textMatched = (elem, searchElm) => {
|
|
117
|
+
const reg = new RegExp(name);
|
|
118
|
+
return reg.test($(elem).find(searchElm).text())
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
// checkBoxとのマッチチェック関数
|
|
122
|
+
const checkBoxMatched = (elm, searchElm, arr) => {
|
|
123
|
+
// 全部のチェックが外れていたらtrue
|
|
124
|
+
return ($.inArray($(elm).find(searchElm).text(), arr) >= 0) || arr.length == 0
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
|
|
109
128
|
$(function() {
|
|
110
|
-
$("input").on("input
|
|
129
|
+
$("input").on("input", function() {
|
|
111
|
-
|
|
112
130
|
// チェックされているチェックボックスを取得
|
|
113
|
-
var kubn =
|
|
131
|
+
var kubn = getCheckBox("[name=kubn]:checked")
|
|
114
|
-
return $(this).val();
|
|
115
|
-
}).get();
|
|
116
|
-
var level =
|
|
132
|
+
var level = getCheckBox("[name=level]:checked")
|
|
117
|
-
return $(this).val();
|
|
118
|
-
}).get();
|
|
119
|
-
var kai =
|
|
133
|
+
var kai = getCheckBox("[name=kai]:checked")
|
|
120
|
-
return $(this).val();
|
|
121
|
-
}).get();
|
|
122
134
|
|
|
123
|
-
// 全部のチェックが外れているか
|
|
124
|
-
const isAllUnChecked = (kubn.length + level.length + kai.length) == 0
|
|
125
135
|
// 入力文字
|
|
126
136
|
var name = $("#search-text").val();
|
|
127
137
|
|
|
138
|
+
// 文字判定用配列
|
|
139
|
+
const matchTextArray = [
|
|
140
|
+
'td.All_kubn', 'td.All_level', 'td.All_houi', 'td.All_kai', 'td.All_toho', 'td.All_yacin', 'td.All_sonota'
|
|
141
|
+
]
|
|
128
|
-
//
|
|
142
|
+
// チェックボックスの判定用配列
|
|
129
|
-
const
|
|
143
|
+
const matchCheckArray = [
|
|
130
144
|
['td.All_kubn', kubn],
|
|
131
145
|
['td.All_level', level],
|
|
132
146
|
['td.All_kai', kai],
|
|
133
147
|
]
|
|
134
|
-
const checkBoxMatched = (elm, searchElm, arr) => {
|
|
135
|
-
return $.inArray($(elm).find(searchElm).text(), arr) >= 0
|
|
136
|
-
}
|
|
137
148
|
|
|
138
|
-
// 入力とのマッチチェック関数
|
|
139
|
-
const matchTextElement = [
|
|
140
|
-
'td.All_kubn', 'td.All_level', 'td.All_houi', 'td.All_kai', 'td.All_toho', 'td.All_yacin', 'td.All_sonota'
|
|
141
|
-
]
|
|
142
|
-
const textMatched = (elem, searchElm) => {
|
|
143
|
-
const reg = new RegExp(name);
|
|
144
|
-
return reg.test($(elem).find(searchElm).text())
|
|
145
|
-
}
|
|
146
|
-
|
|
147
149
|
$("#abcd tbody tr").each(function() {
|
|
148
|
-
|
|
149
150
|
// 全ての要素に対して入力とのマッチをチェック → name==''なら必ずtrue
|
|
150
151
|
// 初期値 : name == "" で、matchTextElementの要素の判定を||でつなげていく
|
|
151
|
-
const matchText =
|
|
152
|
+
const matchText = matchTextArray.reduce((acc, currentValue) =>
|
|
152
153
|
acc || textMatched(this, currentValue), name == "")
|
|
153
154
|
|
|
154
|
-
// 全ての要素に対してチェックボックスとのマッチをチェック
|
|
155
|
+
// 全ての要素に対してチェックボックスとのマッチをチェック
|
|
155
|
-
const matchCheck =
|
|
156
|
+
const matchCheck = matchCheckArray.reduce((acc, currentValue) =>
|
|
156
|
-
acc
|
|
157
|
+
acc && checkBoxMatched(this, currentValue[0], currentValue[1]), true)
|
|
157
158
|
|
|
158
159
|
// わからなければこっちでも良し
|
|
159
160
|
/* const matchText = name == "" || textMatched(this, 'td.All_kubn') || textMatched(this, 'td.All_level') || textMatched(this, 'td.All_houi') || textMatched(this, 'td.All_kai') || textMatched(this, 'td.All_toho') || textMatched(this, 'td.All_yacin') || textMatched(this, 'td.All_sonota') */
|
|
160
161
|
|
|
161
|
-
/* const matchCheck =
|
|
162
|
+
/* const matchCheck = checkBoxMatched(this, 'td.All_kubn', kubn) || checkBoxMatched(this, 'td.All_level', level) || checkBoxMatched(this, 'td.All_kai', kai)*/
|
|
162
163
|
|
|
163
164
|
if (matchCheck && matchText) {
|
|
164
165
|
$(this).show();
|
|
@@ -170,7 +171,6 @@
|
|
|
170
171
|
$(":checkbox").prop("checked", false);
|
|
171
172
|
});
|
|
172
173
|
|
|
173
|
-
|
|
174
174
|
```
|
|
175
175
|
|
|
176
176
|
|
|
@@ -197,5 +197,8 @@
|
|
|
197
197
|
これだとjsが正しくてもマッチしないので注意してください。
|
|
198
198
|
チェックボックスは読み込んだcsvから動的に作成したほうが表記ミスや漏れが無いと思います。
|
|
199
199
|
|
|
200
|
+
### `未満`などの判定は数値で
|
|
201
|
+
今回はご提示頂いたそのまま文字列でマッチさせているので`５年未満`を選択しても`３年未満`はマッチしませんが、本来は同時にマッチしないといけません。
|
|
202
|
+
|
|
200
203
|
### ソースコードはマークダウン形式で入力してください
|
|
201
204
|
入力欄の<code>ボタンを押すか、```で囲むことで読みやすい表示になります。
|