DOM操作 trやtdの削除

前提・実現したいこと

JSでテーブル操作するコードを書いているのですが、下記のコードだと増やすことはできても減らすことができません
入力フォームで指定した数の行と列にできるようにしたいです

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <title>テーブル作るよ</title>
6</head>
7<body>
8
9  <div>
10    <p>横セル数</p>
11    <input type="number" min="2" value="2" id="yoko">
12    <p>縦セル数</p>
13    <input type="number" min="1" value="1" id="tate">
14    <button class="create-btn">ポチっと</button>
15  </div>
16
17
18  <div id="createTable">
19    <table id="table">
20    </table>
21  </div>
22
23
24
25  <script src="js/function.js"></script>
26</body>
27</html>
28

javascript
1document.addEventListener("DOMContentLoaded", function(){
2  // 横と縦セル数を取得
3  document.querySelector('.create-btn').addEventListener('click',clickBtn);
4
5  function clickBtn() {
6    //入力を取得
7    const newrows = document.getElementById('tate').value; // 新行数
8    const newcols = document.getElementById('yoko').value; // 新列数
9    const table = document.getElementById('table');
10
11    let nowrows = 0;
12    let nowcols = 0;
13    if(table.rows.length) {
14      nowrows = table.rows.length; //現行数
15      nowcols = table.rows[0].cells.length; //現列数
16    }
17
18    // 絶対値で取得
19    const absrows = Math.abs(nowrows-newrows);
20    const abscols = Math.abs(nowcols-newcols);
21
22    console.log(absrows + ',' + abscols);
23
24
25    // 列処理　現行に足りない列を足す
26    if (nowcols && nowcols<newcols) {
27      for(let i = 0; i < nowrows; i++){
28        const tr = table.rows[i];
29        for(let j = nowcols; j < newcols;) {
30          const td = tr.insertCell();
31          const textarea = document.createElement('textarea');
32          textarea.defaultValue =  ++j;
33          td.appendChild(textarea);
34          console.log(i+'行'+j+'列');
35        }
36      }
37    }
38    //行処理　何もなかったときこれで追加していく
39    if (nowrows < newrows) {
40      for(let y = 0; y < absrows; y++){
41        const tr = table.insertRow();
42        for(let x = 0; x < newcols; ){
43          const td = tr.insertCell();
44          const textarea = document.createElement('textarea');
45          textarea.defaultValue =  ++x;
46          td.appendChild(textarea);
47        }
48      }
49    }
50
51    // 列と行が減っていたら削除する処理
52    // ここで行削除
53    if (newrows<nowrows) {
54      console.log('行消す');
55      for(let i = nowrows.length; i < absrows; i--){
56        const tr = table.rows[i];
57        tr.deleteRow(i);
58      }
59    }
60    // 列削除
61    if (newcols<nowcols) {
62      console.log('列消す');
63      for(let i = 0; i < newrows; i++){
64        const tr = table.rows[i];
65        for(let j = nowcols.length; j < abscols; j--) {
66          tr.deleteCell(j);
67        }
68      }
69    }
70
71  }
72}, false);

maisumakun

2021/01/25 14:42

> 下記のコードだと増やすことはできても減らすことができません減らそうとした際に、コンソールにエラーなどはでていませんか？

NASUBI73

2021/01/26 14:03

出ていませんでした！別の回答者の方のコードで無事動かすことができました。ご対応いただきありがとうございます。

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

回答1件

ベストアンサー

ご質問拝見させていただきました。
現在のソースだとdeleteRowやdeleteCellの処理まで通らないようになっていました。

・行削除について
for文に記述誤りがありました。

Javascript
1for(let i = nowrows.length; i < absrows; i--){

nowrows自体が現在の行数のため、lengthが不要です。
また、absrows今の行と新しい行の差分でループさせようとしていますが、こちらだとfor文内の処理が実行されません。
例えば、今の行が5新しい行が3だとすると差分が2、上記の式だと 5 < 2 == false となりfor文内の処理が実行されません。for文内の処理を実行するためには、式をtrueとする必要があります。
そのため、ここでは今の行と新しい行の比較をする必要があります。
修正後のfor文は以下となります。

Javascript
1for(let i = nowrows; i > newrows; i--){

for文内の処理ですが、deleteRowはtableタグに対して実行する必要があります。
そのため、現在の行を取得している以下の処理は不要となります。

Javascript
1const tr = table.rows[i];

また、deleteRowの引数indexについては、配列と同様0,1,2と数えます。
そのため、上記のfor文の場合、indexを-1する必要があります。

Javascript
1table.deleteRow(i - 1);

・列削除について
こちらも行削除と同様の内容となります。

for文での不要なlengthおよび式の記述誤り

Javascript
1for(let j = nowcols.length; j < abscols; j--) {

deleteCellの引数indexについても、配列同様0,1,2と数えますので、
上記のfor文の場合、index - 1する必要があります。

Javascript
1tr.deleteCell(j - 1);

上記の内容で修正したソースが以下となります。

Javascript
1      // 列と行が減っていたら削除する処理
2      // ここで行削除
3      if (newrows < nowrows) {
4        console.log('行消す');
5        for(let i = nowrows; i > newrows; i--){
6            table.deleteRow(i - 1);
7        }
8      }
9      // 列削除
10      if (newcols < nowcols) {
11        console.log('列消す');
12        for(let i = 0; i < newrows; i++){
13          const tr = table.rows[i];
14          for(let j = nowcols; j > newcols; j--) {
15            tr.deleteCell(j - 1);
16          }
17        }
18      }