テーブル内で、指定した値のみが含まれるデータを抽出したい

Question

実現したいこと

テーブル内で指定した値を含むレコードのIDだけを抽出したい。
テーブルにはIDなどの他、booleanで出欠席の情報があります。
ここで教えて頂いた方法で、チェックボックスを押すと該当のIDを抽出することはできています。
また、絞り込みを行ったレコードのID全件を抽出することもできています。
今回は「出席が〇(true)のレコードのIDのみを抽出」したいです。

発生している問題・エラーメッセージ

エラーメッセージ

’９’がundefined

①絞りこみたい値
<select name="classview" id="class-select" class="classview">
                <option value="0">選択してください</option>
                <option value="2">メイト</option>
                <option value="3">中受</option>
                <option value="4">新小英</option>
                <option value="6">レプトン</option>
                <option value="10">新総合</option>
                <option value="30">S</option>
                <option value="31">S1</option>
                <option value="32">S2</option>
                <option value="33">S3</option>
                <option value="40">G</option>
                <option value="41">G1</option>
                <option value="42">G2</option>
                <option value="43">G3</option>
                <option value="75">個別</option>
                <option value="80">一般</option>
                <option value="91">中準</option>
                <option value="100">SS</option>
                <option value="101">S1<</option>
                <option value="102">S2</option>
                <option value="110">KK</option>
                <option value="111">KK1</option>
</select>
②絞り込み対象
<table id="table1" class="kjtable">
                    <thead>
                        <tr id="table-date" class="center">
                            <th id="tableID">ID</th>
                            <th id="table-name" width="200">氏名</th>
                            <th id="table-kana" width="150" cmanSortBtn>カナ</th>
                            <th id="table-sex" width="50">性別</th>
                            <th id="table-school">学校</th>
                            <th id="table-reg">登録</th>
                            <th id="table-kshaID" hidden>kshaID</th>
                            <th id="table-ageID" hidden>ageID</th>
                            <th id="table-classID" hidden>classID</th>
                            <th id="attend" class="center">出席</th>
                            <th id="attend-check">チェック</th>
                        </tr>
                    </thead>
                </table>

let table = document.getElementById("table1");
       //HTMLで作成しているテーブルの後ろにはMSAccessから読み込んでいる出席データがあります。
　　　　//cells[9]以降に出席データがありますが、セレクトボックスで指定した列のみ表示するようになっています。※今回は[9]
            for (let i = 1; i < table.rows.length; i++) {
                var zairow = table.rows[i].cells[8];
                var classrow = table.rows[i].cells[7];
                var agerow = table.rows[i].cells[6];
                var ksharow = table.rows[i].cells[5];
                var ShouJsel = table.rows[i].cells[9];
                var ShouJday = table.rows[i].cells[10];
                var ShouMsel = table.rows[i].cells[11];
                var ShouMday = table.rows[i].cells[12];
　　　　　 classrow.style.display = "none";
                agerow.style.display = "none";
                ksharow.style.display = "none";
          }

 var tblTbody = document.getElementById('table1')
                for (let i = 1; i < tblTbody.rows.length; i++) {
                    var cells = tblTbody.rows[i].cells[7].innerText;//指定した列(クラスID)の取得
                    numCells = Number(cells)
                    numSelect_val = Number(" " + select_val + " ")
                    if (numCells === numSelect_val) {
                    } else {
                       $(tblTbody.rows[i]).hide();
                    }
                }

//教えて頂いた、セレクトボックスの値で絞り込みをした後のレコードのIDを取得する部分
 let table = document.getElementById('table1');
                        for (let row of [...table.rows].filter(r => r.style.display != 'none').map(item => item.cells[0])) {//ここでjQueryでhideになっているIDを除く、絞り込み済みのID(画像上の8件)を取得しています。
                            for ( let x of [row].filter(t => t.cells[9]))//ここで８件の中から出席に〇がついているIDだけ抽出したいです。
                            console.log(x)
                        }

試したこと

画像のように絞り込めている状態のIDは取得できていることから、同じようにcells[9]をtrueでフィルタをかけてforで回せばいいのかと思いましたが「row」の使い方がわからずエラーが出ています。
説明が下手で申し訳ありません。
不足するコードなどあれば追加しますのでご指摘ください。
よろしくお願いします。
※コンソール

Comments

[yambejp]

同じような質問を連投していますが、結局何が解決して何が未解決なのでしょうか？
HTMLの例示も不十分でイマイチ回答しづらいです

[teddy1121]

ご指摘ありがとうございます。
一つの質問で複数お願いしてはいけないものだと思い連投になってしまいました。申し訳ありません。
やりたいこと
・①のセレクトボックスの値で②のテーブルの絞り込みをする→解決
・それぞれのレコードにチェックボックスをつける→解決
・チェックボックスにチェックを入れると出席部分にチェックが付く→解決
・チェックが入ったレコードのIDを取得→解決
・絞り込み後のIDのみ取得→解決
・チェックの入ったIDのみ取得→今ここ
このような状態です。
この後IDが取得できたらpythonにIDを飛ばしてMSAccessにIDを追加したいと思っています。
ただこの部分はpythonになるので別の質問でしようと思っていました。
半日～１日程度は色々ググりながら試行錯誤しているのですが、知識が乏しいため先に進まず質問させていただいています。
説明など不十分なところがありますがお力添えをいただけたら幸いです。

[yambejp]

可能であればcodepenなどソースが実行できるサイトにアップされることをおすすめします

[teddy1121]

ありがとうございます。
そちらも併せて勉強させていただきます。

[Lhankor_Mhy]

「画像のように絞り込めている状態のIDは取得できている」とのことですが、その画像は貼り忘れですか？

[Lhankor_Mhy]

また、cells[9]を参照しているようですが、ご提示のHTMLを見る限りでは、それは「出席」ではないように見えます。実際のHTMLと提示されているHTMLが異なるのですか？

[teddy1121]

Lhankor_Mhyさん、いつもありがとうございます！
不手際が多く申し訳ありません。
画像を追加しました。
また、HTMLは順番が入れ替わっていたので正しいものに編集しました。
お手数をおかけしますがよろしくお願いします。

Answer 1

試してないですが。

[...table.rows].filter(r => r.style.display != 'none').flatMap( row => row.cells[9]==="〇" ? [row.cells[0]] : [] )

---

今度は試しました。

    let table = document.getElementById('table1');
    console.log([...table.rows].filter(r => r.style.display != 'none').flatMap(row => row.cells[9].textContent === "〇" ? [row.cells[0].textContent] : []))

---

ついでだから、ひとつにまとめておこう。

    let table = document.getElementById('table1');
    console.log([...table.rows].flatMap(row => row.cells[9].textContent === "〇" && row.style.display != 'none' ? [row.cells[0].textContent] : []))

Comments

[teddy1121]

回答ありがとうございます。
試したところ、エラーはでませんがコンソールには何もでませんでした。
console.log(row)のしたにconsole.log("test")と書いてもそれも表示されないので、forの後が実行されていないような雰囲気です。

[Lhankor_Mhy]

それは残念。

[Lhankor_Mhy]

追記しました。

ところで、コメントを拝見すると、デバッグができないようですね。
ちょっとそれはどうかと思いますので、Devtools の使い方を覚えてはいかがでしょうか。

そうすれば、ここでした質問のほとんどは独力で解決できると思いますよ。

[teddy1121]

追記頂いたコードを試すと「試したこと」部分に追加した画像のように出ます。
これは正しいでしょうか？

Devtools…恥ずかしながら初めて聞きました。
調べてみると説明書きがいっぱいありますね！
ステップアップしつつお恥ずかしい質問をしなくて済むように勉強します！

[Lhankor_Mhy]

そうすると、単純な○ではないのかもしれないですね。trimしてみるといいかもです。

[teddy1121]

できましたーーー！
〇の部分はboolean型を〇に置き換えていたので-1じゃないと駄目だったんですね…
この部分説明が足らず申し訳ありませんでした。
ただ、先ほど教えて頂いたコードで-1は試していたのですがダメでした。
調べてみるとなぜか-1の前にスペースがあったので、「 -1」としたら抽出できました。
なぜスペースが入ってしまったのかわかりませんが、しっかり調べてみます。
毎回的確にアドバイスをいただけて本当に感謝しています。
Lhankor_Mhyさんの技術力に脱帽です!
デバッグについても勉強します！
また困ったときは質問させてください！
ありがとうございました！

[Lhankor_Mhy]

-1とはなんのことなのかわからないのですが、ひとまずご解決されてよかったです。

[teddy1121]

MSAccessのテーブルでYes/No型のフィールドを作っていて、それを読み込むとtrueなら-1、falseなら0が表示されます。そのままだと見る人がわからないかと思い
if (ShouMsel.textContent === " -1") {
ShouMsel.textContent = "〇"
} else {
if (ShouMsel.textContent === " 0") {
　ShouMsel.textContent = "-"
}
}
このような形で〇と-に表示を変えています。
なぜスペースが入るのかまだわからないのですが最悪スペースを入れれば動くことが分かったので一歩前進です！
ありがとうございました！
※フォローさせていただいたのでよかったらまたお助けください！

[Lhankor_Mhy]

私にできることでしたら喜んで。

-1 の件は、〇に置き換える前に処理したかったという話なのですね。理解しました。

[teddy1121]

説明下手ですみませんでした。
はい、よろしくお願い致します！