Question

我的html页面当前正在加载来自先前重定向的数组数组。数组中的每个元素都应呈现在一个表上。

例如，数组为[[h1，h2，h3,1,2,3,4,5,6]，[h1，h2，h3,7,8,9,10,11,12]

第一个表格应如下所示
h1 h2 h3
1 2 3
4 5 6

其他人。

下面是表格的html格式。

<table style="width:50%">
            <tr>
                <th><font color="black"><b>h1</b></font></th>
                <th><font color="black"><b>h2</b></font></th>
                <th><font color="black"><b>h3</b></font></th>

            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>

            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>

            </tr>
    </table>
    <br>

如何制作javascript函数，以便在加载页面时以如上所述的html表格式呈现数组中的所有数据。

感谢您的投入和时间。

Answer 1

这是您可以从中开始的基本代码：

<?php 
$array = [['h1','h2','h3','1','2','3','4','5','6'], ['h1','h2','h3','7','8','9','10','11','12']];
echo '<table>';
foreach($array as $value) {
    echo '<tr>';
        echo '<td>'.$value[0].'</td>';
        echo '<td>'.$value[1].'</td>';
        echo '<td>'.$value[2].'</td>';
    echo '</tr>';
    echo '<tr>';
        echo '<td>'.$value[3].'</td>';
        echo '<td>'.$value[4].'</td>';
        echo '<td>'.$value[5].'</td>';
    echo '</tr>';
}
echo '</table>';

这是它的输出

<table>
    <tbody>
        <tr>
            <td>h1</td>
            <td>h2</td>
            <td>h3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>h1</td>
            <td>h2</td>
            <td>h3</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </tbody>
</table>

Answer 2

您可以为html表分配一个“ id”，以便能够使用Javascript创建和附加DOM元素

在这里您可以找到有关JS中Document对象的一些参考： https://developer.mozilla.org/en-US/docs/Web/API/Document/Document

如何创建html元素： https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

var createHeaderElem = function(value) {
    var th = document.createElement('th');
    th.appendChild(document.createTextNode(value));
    return th;
}

var createRowElem = function(value) {
    var td = document.createElement('td');
    td.appendChild(document.createTextNode(value));
    return td;
}

var input = ['h1','h2','h3',1,2,3,4,5,6];

var table = document.getElementById('content-table');

var trHeader = document.createElement('tr');

trHeader.appendChild(createHeaderElem(input[0]));
trHeader.appendChild(createHeaderElem(input[1]));
trHeader.appendChild(createHeaderElem(input[2]));

table.appendChild(trHeader);

var trBody = document.createElement('tr');

trBody.appendChild(createRowElem(input[3]));
trBody.appendChild(createRowElem(input[4]));
trBody.appendChild(createRowElem(input[5]));

table.appendChild(trBody);

var trBody = document.createElement('tr');

trBody.appendChild(createRowElem(input[6]));
trBody.appendChild(createRowElem(input[7]));
trBody.appendChild(createRowElem(input[8]));

table.appendChild(trBody);

<table id="content-table" style="width:50%">

</table>

在html表中呈现数组值

2 个答案: