70653

[code]

    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;
    }
[/code]

[code]

    <!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>
[/code]

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

↓forを使ったtable作成

[code]

    $(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";
    })
    
[/code]

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

[code]

    <!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>
    
[/code]

[code]

    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;
    }
    
[/code]

追記  
[![画像の説明をここに入力](https://i.stack.imgur.com/6EIg9.png)](https://i.stack.imgur.com/6EIg9.png)


CC BY-SA 4.0
2020-09-23T13:03:13.430
70634
2020-09-24T05:52:28.963
2020-09-24T04:46:35.543
41855
41855
question
javascript html jquery
JavaScript の for 文でテーブルを作成したい


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

[code]

    $(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";
    });
[/code]

[code]

    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;
    }
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
[/code]


CC BY-SA 4.0
2020-09-24T02:44:29.007
70653
2020-09-24T05:52:28.963
2020-09-24T05:52:28.963
7997
7997
70634
answer