TransWikia.com

JavaScript の for 文でテーブルを作成したい

スタック・オーバーフロー Asked by SA__091 on October 1, 2020

td {
  border: solid 1px;
  /* 枠線指定 */
}

table {
  border-collapse: collapse;
  /* セルの線を重ねる */
}

.cell {
  width: 100px;
}

.title_area {
  height: 30px;
}

.up_down_border {
  border-top-style: none;
  border-bottom: none;
}

.bottom_border {
  border-bottom: none;
}

.top_border {
  border-top: none;
}
<!DOCTYPE html>
<html>

<head>   
  <meta charset=UTF-8>
  <title>Untitled Document</title>   
  <link rel="stylesheet" href="menu.css" type="text/css">

</head>

<body>
  <table>
    <tr>
      <td>red</td>
      <td>blue</td>
    </tr>
    <tr>
      <td rowspan="4">サンプル<br>サンプル<br>メニュー</td>
    </tr>
    <tr>
      <td class="up_down_border">サンプル1</td>
    </tr>
    <tr>
      <td class="up_down_border">サンプル2</td>
    </tr>
    <tr>
      <td class="up_down_border">サンプル3</td>
    </tr>
    <tr>
      <td rowspan="4">サンプル<br>menu<br>date</td>
    </tr>
    <tr>
      <td class="bottom_border">サンプル4</td>
    </tr>
    <tr>
      <td class="up_down_border">サンプル5</td>
    </tr>
    <tr>
      <td class="top_border">サンプル6</td>
    </tr>
  </table>
</body>

</html>

for文を使って下記のようにtableを作成しました。理想形に近づけたいのですが、上手くいきません。例えばですが、rowspanやbrの箇所など、ここからどう書いていていいのか分かりません。分かる方ご教示頂きたいです。よろしくお願いします。

↓forを使ったtable作成

$(document).ready(function() {
  var table = document.createElement("table");
  for (var i = 0; i < 7; i++) {
    var tr = document.createElement('tr');
    for (var j = 0; j < 2; j++) {
      var td = document.createElement('td');
      td.innerHTML = 'データ' + (i + 1) + "-" + (j + 1);
      tr.appendChild(td);
    }
    table.appendChild(tr);
  }
  $("body").append(table);
// テーブルの外周線の太さを設定
table.border = "2";
// セルの内周余白量を設定
table.cellPadding = "4";
// セルの外周余白量を設定
table.cellSpacing = "0";
})

↓理想形のtable、for文を使ってこの形にしたい。

<!DOCTYPE html>
<html>

<head>   
  <meta charset=UTF-8>
  <title>Untitled Document</title>   
  <link rel="stylesheet" href="menu.css" type="text/css">

</head>

<body>
  <table>
    <tr>
      <td>red</td>
      <td>blue</td>
    </tr>
    <tr>
      <td rowspan="4">サンプル<br>サンプル<br>メニュー</td>
    </tr>
    <tr>
      <td class="up_down_border">サンプル1</td>
    </tr>
    <tr>
      <td class="up_down_border">サンプル2</td>
    </tr>
    <tr>
      <td class="up_down_border">サンプル3</td>
    </tr>
    <tr>
      <td rowspan="4">サンプル<br>menu<br>date</td>
    </tr>
    <tr>
      <td class="bottom_border">サンプル4</td>
    </tr>
    <tr>
      <td class="up_down_border">サンプル5</td>
    </tr>
    <tr>
      <td class="top_border">サンプル6</td>
    </tr>
  </table>
</body>

</html>

td {
  border: solid 1px;
  /* 枠線指定 */
}

table {
  border-collapse: collapse;
  /* セルの線を重ねる */
}

.cell {
  width: 100px;
}

.title_area {
  height: 30px;
}

.up_down_border {
  border-top-style: none;
  border-bottom: none;
}

.bottom_border {
  border-bottom: none;
}

.top_border {
  border-top: none;
}

追記
画像の説明をここに入力

htmljavascriptjquery

One Answer

もう少しきれいに書くことは可能ですがこんな感じでどうでしょうか？

$(document).ready(function () {
  const table = document.createElement("table");

  const tableBody = {
    rows: [
      [{ value: "red" }, { value: "blue" }],
      [{ value: "サンプル<br>サンプル<br>メニュー", rowSpan: 4 }],
      [{ value: "サンプル1", className: "up_down_border" }],
      [{ value: "サンプル2", className: "up_down_border" }],
      [{ value: "サンプル3", className: "up_down_border" }],
      [{ value: "サンプル<br>menu<br>date", rowSpan: 4 }],
      [{ value: "サンプル4", className: "bottom_border" }],
      [{ value: "サンプル5", className: "bottom_border" }],
      [{ value: "サンプル6", className: "top_border" }]
    ]
  };

  for (var i = 0; i < tableBody.rows.length; i++) {
    const cols = tableBody.rows[i];
    const tr = document.createElement("tr");
    for (var j = 0; j < cols.length; j++) {
      const col = cols[j];
      const td = document.createElement("td");
      td.innerHTML = col.value;
      if (col.className) {
        td.className = col.className;
      }
      if (col.rowSpan >= 0) {
        td.rowSpan = col.rowSpan;
      }
      tr.appendChild(td);
    }
    table.appendChild(tr);
  }
  document.querySelector("body").append(table);

  // テーブルの外周線の太さを設定
  table.border = "2";
  // セルの内周余白量を設定
  table.cellPadding = "4";
  // セルの外周余白量を設定
  table.cellSpacing = "0";
});
td {
  border: solid 1px;
  /* 枠線指定 */
}

table {
  border-collapse: collapse;
  /* セルの線を重ねる */
}

.cell {
  width: 100px;
}

.title_area {
  height: 30px;
}

.up_down_border {
  border-top-style: none;
  border-bottom: none;
}

.bottom_border {
  border-bottom: none;
}

.top_border {
  border-top: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Correct answer by himenon on October 1, 2020

Add your own answers!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP