テーブルのある列の値を元にチェックボックスのtrue、falseを設定したい

Question

実現したいこと

画像の「出席」が〇の場合、ページ読み込み時にチェックボックスをtrueにしたいです。
テーブルはMSAccessデータベースから読み込んだもので、件数は流動します。
列はたくさんありますが、必要ない部分はnoneで隠しています。
現状、チェックボックスをクリックすると「出席」部分は"〇"と"-"に切り替わります。

該当のソースコード

//テーブルとチェックボックスの作成
var table = "";
            for (var i = 0; i < kjPartsSP.length; i++) {　//kjPartsSPはテーブルの元データの配列です。
                table += "<tr>"
                var kjLst = (String(kjPartsSP[i])).split(/[,]/g);
                for (var p = 0; p < kjLst.length; p++) {
                    table += "<td>" + kjLst[p] + "</td>";
                }
                table += "<td align=center class=positionMiddle><input type=checkbox id=checkBtn style=transform:scale(3.5); ></td>";
                table += "</tr>"
            }
//テーブル列の状況
let table = document.getElementById("table1");
            for (let i = 1; i < table.rows.length; i++) {
                var ksharow = table.rows[i].cells[5];
                var agerow = table.rows[i].cells[6];
                var classrow = table.rows[i].cells[7];
                var zairow = table.rows[i].cells[8];
                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];
                var Esel = table.rows[i].cells[13];
                var Eday = table.rows[i].cells[14];
                var Msel = table.rows[i].cells[15];
                var Mday = table.rows[i].cells[16];
                var Jsel = table.rows[i].cells[17];
                var Jday = table.rows[i].cells[18];
                var Scsel = table.rows[i].cells[19];
                var Scday = table.rows[i].cells[20];
                var Sosel = table.rows[i].cells[21];
                var Soday = table.rows[i].cells[22];
　　　　　 classrow.style.display = "none";
                agerow.style.display = "none";
                ksharow.style.display = "none";

//表示の切り替え
let kamokuVis = document.getElementById('kamoku-select').value;   
                switch (kamokuVis) {
                    case "11":
                        if (ShouJsel.textContent === " -1") {
                            ShouJsel.textContent = "〇"     
                        }else{
                            if (ShouJsel.textContent === " 0") {
                                ShouJsel.textContent = "-"
                            }
                        }
                            //ShouJsel.style.display = "none";
                            ShouJday.style.display = "none";
                            ShouMsel.style.display = "none";
                            ShouMday.style.display = "none";
                            Esel.style.display = "none";
                            Eday.style.display = "none";
                            Msel.style.display = "none";
                            Mday.style.display = "none";
                            Jsel.style.display = "none";
                            Jday.style.display = "none";
                            Scsel.style.display = "none";
                            Scday.style.display = "none";
                            Sosel.style.display = "none";
                            Soday.style.display = "none";                        
                        break;

//チェックボックス(チェックボックスをクリックすると出席部分の"〇""ー"が切り替わる
document.addEventListener('click', function (e) {
            var t = e.target;
            //if (t.nodeName == "INPUT" && t.type == "checkbox" && t.checked) {
            if (t.nodeName == "INPUT" && t.type == "checkbox" && t.checked == true) {
                var b = Array.prototype.map.call(t.parentNode.parentNode.querySelectorAll('td'), function (n) {
                    return n.textContent;
                var a = t.parentNode.parentNode.querySelectorAll('td'); 
                
                let table = document.getElementById("table1");
                let c = document.getElementById("kamoku-select").value;

                switch (c) {
                    case "11":
                        var k = a[9]
                        k.innerHTML = "〇";
                        break;

試したこと

jQueryで対象の列を指定して、指定した列の値が〇ならチェックボックスをtrueにすればいいのかと思いましたが、恐らく値とチェックボックスがリンクしていないような気がします。

jQuery(function ($) {
                    var chkval = document.getElementById('table1')　 //テーブルを指定
                    for (let i = 1; i < chkval.rows.length; i++) { 　　　//テーブルの件数分まわす）
                        var cells = chkval.rows[i].cells[9].innerText;      //指定した列(ここではShouJsel)の取得
                        if (cells === "〇") {                                  //値が〇ならば
                            cells.checked == true　                               //チェックボックスをtrueに
                        }                        
                    }
                });

コードをどこまで載せればお判りいただけるかわからなかったので、不足があればご指摘ください。
よろしくお願い致します。

Answer 1

　var cells = chkval.rows[i].cells[9].innerText;としていますから、cellsに入っているのはただの文字列です。文字列のプロパティを変更しても、DOMには影響がないです。前回の質問と同じ間違いをしています。

　chkval.rows[i]からinputを探す必要があります。querySelectorでいいかと思います。

　Element.querySelector() - Web API | MDN

---

　蛇足ですが個人的には、なにかの必要があってそのようにしているのでなければ、〇などで表示せずに初めからチェックボックスを埋めてしまった方が早いような気がしますが……

Comments

[teddy1121]

Lhankor_Mhyさん、いつもありがとうございます！
孤独に開発しているためお助け頂いて本当に感謝です！
確かに…チェックボックスだけでもいいですね(--;)
ただ、この処理のあと登録ボタンを押してAccessデータベースにIDと日付を書き込みたいと思っています。
その際切り分けとして、「〇がついている行のIDだけ書き込む」という風にしたいので〇は必要なのかなと思っていました。
ご指摘頂いた部分ですが、同じミス申し訳ありません。
var cells = chkval.rows[i].cells[9].querySelector("input");と
var cells = chkval.rows[i].cells[9].querySelector(name="ShouJsel");
を試しましたがcellsがnullを返します。
全然的外れでしょうか？

[Lhankor_Mhy]

回答にも書きましたが、chkval.rows[i].cells[9] から探すのではなくて、chkval.rows[i]からinputを探す必要があります。
もちろん、chkval.rows[i].cells[10].firstElementChild などのように決め打ちしてもいいです。お好みでどうぞ。

[teddy1121]

できました！
var cells = chkval.rows[i].querySelector("input");
上記のようにするとinputを取得できました。
次に
var chkcells = chkval.rows[i].cells[9].textContent;
でセルを参照して
if ( chkcells ==="〇"){
cells.checked =true
}
で[9]が〇のレコードのチェックボックスをtrueにする。

Lhankor_Mhyさんさすがです！
理想の形です！
あとはAccessへの書き込みに挑戦します！
またお暇があればご指導お願いします！
ありがとうございました！

[Lhankor_Mhy]

お役に立てたようで何よりです。