絞込検索でテーブル側のidが取得できない

前提・実現したいこと

WordPressのプラグインである「CSVtoHTML]を使用し、CSVをテーブルとして読み込み
絞込検索ができるようにしたいと思っております。
このシステムは、下記URLなどを参考に検索フォームの選択値に設定してあるidとCSVの指定の要素に設定してあるidを比較し、合致したデータの行要素を表示するのをのゴールとして開発しています。

####参考サイト
http://cercopes-z.com/HTML5/table-5.html
https://syncer.jp/javascript-reference/element/innerhtml
https://www.sejuku.net/blog/26442

発生している問題

参考サイトを基に下記のコードをWordPressのページとFTPに反映しましたが、
実際には検索結果には出てきません。

①WordPressページ内に反映したコード(プルダウンは現時点ではまだ絞込反映できていません)

html
1<head>
2  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
3</head>
4<body>
5<!-- 検索用プルダウンフォームを、絞り込みたいテーブルより前に設置します -->
6<div class="search-area">
7  <form action="">
8    <b>選択1</b><br>
9    <input type="radio" name="fruitform" id="banana" value="バナナ"/>　バナナ<br>
10    <input type="radio" name="fruitform" id="apple" value="りんご" />　りんご<br>
11    <input type="radio" name="fruitform" id="orange" value="みかん" />　みかん<br>
12    <br>
13    <b>選択2</b><br>
14    <input type="checkbox" name="fruitform" id="indoneshia" value="インドネシア"> インドネシア産
15    <input type="checkbox" name="fruitform" id="aomori" value="青森"> 青森産
16    <input type="checkbox" name="fruitform" id="shizuoka" value="静岡"> 静岡産
17    <br><br>
18    <b>選択3</b><br>
19    <select>
20      <option>---</option>
21      <option name="fruitform" id="150" value="150円">150円以下</option>
22      <option name="fruitform" id="160" value="160円">160円以下</option>
23      <option name="fruitform" id="170" value="170円">170円以下</option>
24      <option name="fruitform" id="180" value="180円">180円以下</option>
25    </select>
26  </form>
27  <input type="button" value="検索" onclick="fruitformpage()"/>
28<p>検索結果<br>　<span id="output">　</span></p>
29</div>
30<script type="text/javascript" src="/wp-admin/js/TestFruit.js"></script>
31[csvtohtml_create class="fruit_table" html_id="fruit_table" source_type="guess" path="" fetch_lastheaders="0" source_files="2020/02/TestFruit.csv" debug_mode="no"]
32</body>

②FTPに反映したJavaScript

JavaScript
1function fruitformpage(){
2  const arr = [];
3  const fruitform = document.getElementsByName("fruitform");
4  var csv_table = document.getElementById("fruit_table")
5  var rows = csv_table.rows;
6  const col = 1;
7
8  for (let i = 0; i < fruitform.length; i++){
9  	//(fruitform[i].checked  || fruitform[i].selected=== true)と同じ
10    if(fruitform[i].checked || fruitform[i].selected){ 
11      arr.push(fruitform[i].id);
12    }
13  }
14  for(var row=1;row<rows.length; row++){
15  	var cell = rows[row].cells[col]; //セルの要素
16	var data = cell.id; //セルの要素(id)取得
17	if(data === arr){
18	  	data.push(rows[row].id);
19	}
20  }
21  document.getElementById("output").textContent = data;
22}

試したこと

開発ツールで見てみると検索フォーム側の要素(id)は取得できていますが
テーブル側の要素(id)できていませんでした。
参考サイト以外で有力なサイトが出てこず、どうすればいいのかがわからない状態です。

どのようにセル要素内のidを取得できるようになるのでしょうか？
教えてください

補足情報（FW/ツールのバージョンなど）

Windows10 64bit
WordPress 5.3.2
使用テーマ：Lightning（子テーマ）
使用プラグイン：CSVtoHTML ver1.1.46
GoogleChrome バージョン: 79.0.3945.130（Official Build） 64 ビット

###追記事項

HTML
1<table id="fruit_table" class="csvtohtml">
2	<thead>
3		<tr class="headers">
4			<th class="colset colset-1">産地</th>
5			<th class="colset colset-2">フルーツ</th>
6			<th class="colset colset-3">金額</th>
7			<th class="colset colset-4">販売地</th>
8		</tr>
9	</thead>
10	<tbody>
11		<tr class="rowset odd rowset-1">
12			<td class="colset colset-1">インドネシア産</td>
13			<td class="colset colset-2">
14				<p id='banana'>バナナ</p>
15			</td><td class="colset colset-3">150円</td>
16			<td class="colset colset-4">鎌倉市</td>
17		</tr><tr class="rowset even rowset-2">
18			<td class="colset colset-1">青森産</td>
19			<td class="colset colset-2">
20				<p id='apple'>りんご</p>
21			</td><td class="colset colset-3">175円</td>
22			<td class="colset colset-4">横須賀市</td>
23		</tr>
24		<tr class="rowset odd rowset-3">
25			<td class="colset colset-1">静岡産</td>
26			<td class="colset colset-2">
27				<p id='orange'>みかん</p>
28			</td>
29			<td class="colset colset-3">160円</td>
30			<td class="colset colset-4">三浦市</td>
31		</tr>
32		<tr class="rowset even rowset-4">
33			<td class="colset colset-1">千葉産</td>
34			<td class="colset colset-2">
35				<p id='orange'>みかん</p>
36			</td>
37			<td class="colset colset-3">160円</td>
38			<td class="colset colset-4">逗子市</td>
39		</tr>
40		<tr class="rowset odd rowset-5">
41			<td class="colset colset-1">沖縄産</td>
42			<td class="colset colset-2">
43				<p id='banana'>バナナ</p>
44			</td>
45			<td class="colset colset-3">165円</td>
46			<td class="colset colset-4">厚木市</td>
47		</tr>
48		<tr class="rowset even rowset-6">
49			<td class="colset colset-1">八丈島産</td>
50			<td class="colset colset-2">
51				<p id='banana'>バナナ</p>
52			</td>
53			<td class="colset colset-3">170円</td>
54			<td class="colset colset-4">綾瀬市</td>
55		</tr>
56		<tr class="rowset odd rowset-7">
57			<td class="colset colset-1">インド産</td>
58			<td class="colset colset-2">
59				<p id='apple'>りんご</p>
60			</td>
61			<td class="colset colset-3">170円</td>
62			<td class="colset colset-4">横浜市</td>
63		</tr>
64		<tr class="rowset even rowset-8">
65			<td class="colset colset-1">マレーシア産</td>
66			<td class="colset colset-2">
67				<p id='banana'>バナナ</p>
68			</td>
69			<td class="colset colset-3">155円</td>
70			<td class="colset colset-4">藤沢市</td>
71		</tr>
72	</tbody>
73</table>

kei344

2020/02/10 04:08

テーブル部分について、出力されたHTML（ブラウザで「ページのソースを表示」）を質問文に追記ください。

kei344

2020/02/10 04:20

「テーブル部分について」とコメントしたのですが･･･。

Miken_work

2020/02/10 04:28

大変失礼いたしました。既に上記コードにて確認頂いてるかもしれませんが、本文内にて追記事項として記載いたしました。

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

回答1件

ベストアンサー

js
1var data = cell.id; //セルの要素(id)取得

上記コードで取得できるのは、td要素のidです。
下記のように設定されていなければ、取得できません。（他のidについても同じことが言えます）

HTML
1<td id="aaa"></td>

また、if(data === arr)という風に比較していますが、変数arrは配列です。
「配列の中に有るかどうか」は配列用のメソッドから適切なものを使用しましょう。

【Array - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#Array_instances

投稿2020/02/10 04:38

kei344

総合スコア69458

Miken_work

2020/02/10 05:54

ご回答ありがとうございます。分かりやすい説明、参考サイトのご提示までありがとうござます。このidの取得方法はtdだけだったんですね。ご覧いただいた通りではありますがpタグ要素でidを設定しているのですが、ご回答いただいてから他取得法を模索しましたが、getElementById()メソッドが出てくるばかりです。 getElementById()メソッドを配列のように扱えればいいのですが、そちらも調べても有力な情報は手に入りませんでした。もし、innerHTMLや、getElementByID()メソッドで配列のような比較方法、またはそれ以外で優良な方法があれば教えて頂きたいです。

kei344

2020/02/10 06:34

要素を取得するならquerySelectorAllとか使えばよいですが、そもそもの話 id='banana'が同一HTML上に複数あるのは文法的に間違っています。そういう場合はclass='banana'など別の指定方法を使います。で、trを1行ずつ走査するのではなく、Document.querySelectorAll('.banana') とでもして、それぞれのclosestでtrを取得するような設計にします。【Document.querySelectorAll() - Web API | MDN】 https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll 【Element.closest() - Web API | MDN】 https://developer.mozilla.org/ja/docs/Web/API/Element/closest

Miken_work

2020/02/10 07:56

ご回答ありがとうございます。そちらの内容でやってみます！

Miken_work

2020/02/13 08:52

kei344様の内容を参考に、必要なデータの取得ができました！とても分かりやすい説明ありがとうございました！

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