JSで追加したテーブルの値を削除ボタンを押した際に振り直す

Question

ボタンを押すと行が追加され、削除ボタンを押すと行が削除されるHTML(JS)を記載しております。
tableの先頭に何行目かをカウントする数字を出しているのですが、削除ボタンを押したタイミングで値を振り直したいです。

console.log(table.rows[i].cells.innerText);

というパラメータを直接書き換えればよいのでは？と思ったのですが、
undifinedというログが出てしまいました。

こちらテーブルの先頭行にある場所をいじりたい場合どうすればよいのでしょうか。

■ テーブルのイメージ
No　文言
1　あああ(削除ボタン)
2　いいい(削除ボタン)
3　ううう(削除ボタン)

↓ 2　いいい(削除ボタン)を押したら

No　文言
1　あああ(削除ボタン)
2　ううう(削除ボタン)

みたいにしたいです。

<script>
  // 行を追加
  function coladd() {

    var table = document.getElementById("table");
    
    // 行数取得
    var count = table.rows.length;

    // 行を行末に追加
    var row = table.insertRow(-1);
    //td分追加
    var cell1 = row.insertCell(-1);
    var cell2 = row.insertCell(-1);
    // セルの内容入力
    cell1.innerHTML = count + '行を追加しました';
    cell2.innerHTML = 'この行を削除しますか？<input type="button" value="削除" id="coladd" onclick="coldel(this)">';
  }

  // 行を削除  
  function coldel(obj) {
    colOrganize(obj);
    // 削除ボタンを押下された行を取得
    tr = obj.parentNode.parentNode;
    // trのインデックスを取得して行を削除する
    tr.parentNode.deleteRow(tr.sectionRowIndex);
  }

  // 行番号を整理
  function colOrganize() {  
    var table = document.getElementById("table");

    var count = table.rows.length;

    //より簡単な方法    
    for(var i=1; i<count; i++){
        console.log(table.rows[i].cells.innerText);
    }
 </script>
 

Comments

[int32_t]

数字の<td>は<tr>の中の何番目のセルなのでしょうか?

[momiji0210]

ご回答ありがとうごじあます。index上だと0番目になります！
一番先頭に必ずナンバーが振り分けられております。

Answer 1

行のなかの一番目のセルが番号とのことなので、cells[0]を参照する必要があります。

  // console.log(table.rows[i].cells.innerText);
  table.rows[i].cells[0].textContent = i;

それから、colOrganize() は deleteRow() の後に呼ばないと効果がないと思います。

---

CSSで連番を表示すればJavaScriptでは調整する必要はなくなります。たとえば、以下のような感じです。

:root {
  counter-reset: item 0;
}

table td:nth-of-type(1)::before {
  content: counter(item);
  counter-increment: item;
}

Comments

[momiji0210]

ありがとうございますー！！！！！できました。

>>それから、colOrganize() は deleteRow() の後に呼ばないと効果がないと思います。
これが一番の原因でした・・・。確かにそうですよね。

上書きの仕方が間違っているのかと思いこんでおりました。
ご丁寧にありがとうございました。