アプリケーションjs_配列:テーブルを生成

配列の内容によると、ページ・テーブル・フォーム生成
我々は、データベースから取得する、またはデータ情報への言い訳を、多くの場合、配列の形で
、それは基本的に二次元配列である
HTMLの一部

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border-collapse: collapse;
        }
        td{
            border: 1px solid #000;
            padding: 10px;
            
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>户籍</td>
            </tr>
        </thead>
        <tbody id="main"></tbody>
    </table>

JS一部:レッツ・ローカル配列、アナログデータを作成します

var arr=[
            ['刘','男','21','河南'],
            ['段','女','22','河南'],
            ['杨','男','23','河南'],
            ['杨','男','23','河南'],
            ['杨','男','23','河南'],
            ['杨','男','23','河南'],
            ['赵','女','24','河南']
        ]

変数の定義、使用して生成されたコンテンツの文字列、文字列連結を格納+ =

var str='';

配列の内容は、変数にスプライシングされたSTR

for(j=0;j<arr.length;j++){
            str+='<tr>';
            str+=`<td>${j+1}</td>`;
            for(i=0;i<arr[j].length;i++){
                str+=`<td>${arr[j][i]}</td>`
            }
            str+='</tr>';
        }

タグTBODYに書き込まれた文字列のループ、

main.innerHTML=str;

その結果、実行されています
ここに画像を挿入説明

公開された21元の記事 ウォンの賞賛3 ビュー325

おすすめ

転載: blog.csdn.net/qq_44531034/article/details/104956660