javascriptでテーブルの値を変更したい

Question

実現したいこと

データベースを元にテーブルを作成しています。
テーブルにはチェックボックスがあり、そのチェックボックスをクリックしてテーブルの値を変更したいです。

該当のソースコード

<p>
            <div class="get-table">
                <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-address">地域</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>
            </div>
        </p>

<select name="kamoku" class="kamoku" id="kamoku-select">
                <option value="0">選択してください</option>
                <option value="11">選択１</option>
                
            </select>

document.addEventListener('click', function (e) {
            var t = e.target;
            if (t.nodeName == "INPUT" && t.type == "checkbox" && t.checked) {
                var a = Array.prototype.map.call(t.parentNode.parentNode.querySelectorAll('td'), function (n) {
                    return n.textContent;
                });

                let table = document.getElementById("table1");
                let c = document.getElementById("kamoku-select").value;
                
                switch (c) {
                    case "11":
                        let m = a[9]
                        m.innerHTML = "〇";
                        break;
                }

試したこと

a[9]が出席部分です。
innerText,value,textContentなど試しましたが、エラーは出ないものの無反応です。
上記コードでは〇のみとなっていますが、できれば"〇"なら"-"に、"-"なら"〇"にしたいです。
レコードは一定ではありません。
console.log(a[9])で"〇"や"-"は取得できます。

お力を貸していただけたら幸いです。
よろしくお願いします。

Comments

[m.ts10806]

コードが半端な状態に思います。
あと、HTML、css含めて「他者がコピペで再現できる」ようにご配慮願います。

[teddy1121]

大変失礼しました。
HTMLコードを追加しました。
データについてはMSAccessからpyodbcで読み込んでいるためどうやってお見せしたらいいかわかりませんでした。
よろしくお願い致します。

Answer 1

                var a = Array.prototype.map.call(t.parentNode.parentNode.querySelectorAll('td'), function (n) {
                    return n.textContent;
                });

                        ....
                        let m = a[9]
                        m.innerHTML = "〇";

aは、「<td>のtextContentプロパティをコピーした文字列の配列」ですから、a[9].innerHTML は文字列の innerHTML プロパティをセットしています。もちろん何の効果もありません。

var a = t.parentNode.parentNode.querySelectorAll('td'); でaを「<td>の配列のようなもの」にすれば動くのではないでしょうか。

Comments

[teddy1121]

ご回答ありがとうございます！
教えて頂いた形で"-"が"〇"になりました！
理想通りです！
ありがとうございました！

Answer 2

当方の環境では、（HTMLを想像で補って）以下のように修正すると動作しました。

        var a = Array.prototype.map.call(t.parentNode.parentNode.querySelectorAll('td'), function (n) {
          return n.textContent;
        });

↓

        var a = t.parentNode.parentNode.querySelectorAll('td')

Comments

[Lhankor_Mhy]

かぶりました。

[teddy1121]

ご回答ありがとうございます！
(笑)出来る人は同じ形に行きつくんですね。
みなさんさすがです！
今回もありがとうございました。
※int32_tさんのほうが回答が早かったのでベストアンサーにさせて頂きました。申し訳ありません。

[Lhankor_Mhy]

ご解決されて何よりです。