タグjavascript tableを作成

for文を使って下記のようにtableを作成しました。理想形に近づけたいのですが、上手くいきません。

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

html
1<!DOCTYPE html>
2<html>
3
4<head>   
5  <meta charset=UTF-8>
6  <title>Untitled Document</title>   
7  <link rel="stylesheet" href="menu.css" type="text/css">
8
9</head>
10
11<body>
12  <table>
13    <tr>
14      <td>red</td>
15      <td>blue</td>
16    </tr>
17    <tr>
18      <td rowspan="4">サンプル<br>サンプル<br>メニュー</td>
19    </tr>
20    <tr>
21      <td class="up_down_border">サンプル1</td>
22    </tr>
23    <tr>
24      <td class="up_down_border">サンプル2</td>
25    </tr>
26    <tr>
27      <td class="up_down_border">サンプル3</td>
28    </tr>
29    <tr>
30      <td rowspan="4">サンプル<br>menu<br>date</td>
31    </tr>
32    <tr>
33      <td class="bottom_border">サンプル4</td>
34    </tr>
35    <tr>
36      <td class="up_down_border">サンプル5</td>
37    </tr>
38    <tr>
39      <td class="top_border">サンプル6</td>
40    </tr>
41  </table>
42</body>
43
44</html>

css
1td {
2  border: solid 1px;
3  /* 枠線指定 */
4}
5
6table {
7  border-collapse: collapse;
8  /* セルの線を重ねる */
9}
10
11.cell {
12  width: 100px;
13}
14
15.title_area {
16  height: 30px;
17}
18
19.up_down_border {
20  border-top-style: none;
21  border-bottom: none;
22}
23
24.bottom_border {
25  border-bottom: none;
26}
27
28.top_border {
29  border-top: none;
30}
31

Zuishin

2020/09/23 11:25

for 文を使わず手で書いたほうが早いと思いますが、使う理由は何でしょうか？

rihipa224

2020/09/23 11:36

条件式を使ってセルの数を操作したいので、for文の方がよくて、、、

Zuishin

2020/09/23 11:41

規則性が低いのでそのような操作には向かないと思います。データを別に用意しておいて挿入する方が良いでしょう。

kuma_kuma_

2020/09/23 19:25

> 条件式を使ってセルの数を操作したいので、for文の方がよくて、、、他の方も書かれていますが、データの持ち方を変えるか先に全件表示されているtableを用意して、表示を絞り込むほうが良いかと思います。

rihipa224

2020/09/23 20:33

>データの持ち方を変えるかデータの持ち方を変えるとは、イメージがついていないのですが、、、どういったことでしょうか？ >先に全件表示されているtableを用意して、表示を絞り込むほうが良いかと思います。テーブルを変数の中に入れたいのですが、できるものなんでしょうか。また、セルの追加はできないですよね。。。

kuma_kuma_

2020/09/23 20:48

>データの持ち方を変えるか元となるデータ自体タグの形式のテキストで持っておくという事です data[0] = '<td class="top_border">サンプル6</td>'; 発想の転換ですデータ→絞り込み→<tr><td>タグの追加ではなくデータをはじめから<tr><td>タグで全表示→JSで不要なタグを削除とするという事です。必要なタグ情報は初めから<tr><td>タグ内に内包させておけば <tr><td>タグ情報からデータ化(変数値化)すれば良いのです。 > また、セルの追加はできないですよね。。。細かい内容が判りませんが技術的にたとえば「ボタンを押した時表の最後に行を追加」などはできますよ