Question

我从我的数据库中得到一个如下所示的PHP数组：

     $dbResult= array([0]=>array([a]=>1 [b]=>1 [c]=>1)
                      [1]=>array([a]=>2 [b]=>2 [c]=>2)
                      [3]=>array([a]=>3 [b]=>3 [c]=>3)
                     )

在我的HTML中，我有一个ID为class的div。

我想要做的是使用JavaScript创建一个包含PHParray的表，但只有当点击了标签id =“labletocreatetable”时，表格应如下所示

我知道我应该使用json_encode但是当我这样做时，结果看起来像这样，我不太确定如何使用它

[{"a":"1","b":"1","c":"1"},
 {"a":"2","b":"2","c":"2"},
 {"a":"3","b":"3","c":"3"}]

Answer 1

试试这个：

var arr = [
    {"a":"1","b":"1","c":"1"},
    {"a":"2","b":"2","c":"2"},
    {"a":"3","b":"3","c":"3"}
], cols = [];

// Elements to clone:
var tr = document.createElement('tr'),
    td = document.createElement('td');

function addCell(text, row) {
    var cell = td.cloneNode(false);
    cell.appendChild(document.createTextNode(text));
    row.appendChild(cell);
}

// Body:
var tbody = document.createElement('tbody')
for(var i=0; i<arr.length; ++i) {
    var row = tr.cloneNode(false);

    // Iterate known columns
    for(var j=0; j<cols.length; ++j) {
        addCell(arr[i][cols[j]], row);
        delete arr[i][cols[j]]; // Warning: will erase data
    }

    // Find new columns
    for(var j in arr[i]) {
        if(arr[i].hasOwnProperty(j)) {
            cols.push(j);
            addCell(arr[i][j], row);
        }
    }

    tbody.appendChild(row);
}

// Head:
var thead = document.createElement('thead'),
    row = tr.cloneNode(false);
for(var i=0; i<cols.length; ++i) {
    addCell(cols[i], row);
}
thead.appendChild(row);

// Table:
var table = document.createElement('table');
table.appendChild(thead);
table.appendChild(tbody);
document.body.appendChild(table);

Demo

您的结构存在的问题是我们事先并不知道列，而for..in会以任意顺序迭代对象。

然后，我创建了一个数组来按顺序存储列，对于每一行，我首先迭代这些列，然后迭代剩余的列（按任意顺序）并将它们推送到数组。

如果您不想删除数据，则此处为alternative demo。

Answer 2

我不确定你想要什么，但这可能对你有帮助

<?php

 $dbResult= array(0=>array('a'=>1, 'b'=>1, 'c'=>1),
                      1=>array('a'=>2, 'b'=>2, 'c'=>2),
                      3=>array('a'=>3, 'b'=>3, 'c'=>3)
                     );
echo '<table border=1><tr><td>';
echo implode('<td>',array_keys($dbResult[0]));  

 foreach($dbResult as $k =>$v){
    echo '<tr>';
foreach ($v as $k1 => $v1) {
    echo '<td>'.$v1.'</td>';
}
echo '</tr>';
}

<强> 输出

enter image description here

Answer 3

您需要使用ajax来实现此目的。我写了这些步骤。

1）a.html

- 包含jQuery库 -

<div id="div1"></div> <!-- DIV WHERE THE TABLE CONTENT WILL BE LOADED -->
<label id="labletocreatetable" onclick="createTheTable()">Click to create the table</label>


<script>
function createTheTable() {

  $.ajax({
    url:"<Path to >get_the_content.php",
    success:function(result){
        $("#div1").html(result); // DIV WHERE THE CONTENT WILL BE LOADED
    }
    });

}
</script>

2）get_the_content.php

<?php $dbResult= array(
           0=>array('a'=>1, 'b'=>1, 'c'=>1),
                   1=>array('a'=>2, 'b'=>2, 'c'=>2),
                   3=>array('a'=>3, 'b'=>3, 'c'=>3),
                ); 
$myKeys = array_keys($dbResult[0]); //Will return you a,b,c as numeric array.  ?>


<table border="1" width="30%">
 <tr> <!-- FOR THE TABLE HEADER a,b and c -->
    <th> <?php echo $myKeys[0]; ?> </th>
    <th> <?php echo $myKeys[1]; ?> </th>
    <th> <?php echo $myKeys[2]; ?> </th>
  </tr>
<?php foreach($dbResult as $key=>$rows) { // for the table's content ?>
   <tr>
     <td><?php echo $rows[$myKeys[0]]; ?></td>
     <td><?php echo $rows[$myKeys[1]]; ?></td>
     <td><?php echo $rows[$myKeys[2]]; ?></td>
   </tr>
<?php } ?>
</table> 

<!-- YOU NEEDN'T TO echo THE TABLE it will be automatically returned to ajax. -->

Answer 4

试试这个（jsFiddle）：

// Set this with PHP
var data =  [{"a":"1","b":"1","c":"1"},
             {"a":"2","b":"2","c":"2"},
             {"a":"3","b":"3","c":"3"}];

// Set this to the target html element
var target = document.getElementsByTagName('body')[0];

// Create table and add header
var table  = createElement('table');
    table.appendChild( addRow( Object.keys(data[0]) ) );

// Add rows
for (var r=0; r<data.length; r++) {
    table.appendChild( addRow( data[r] ) );
}

// Append table to target
target.appendChild(table);

// Helper functions
function createElement(type, content) {
    var e = document.createElement(type);

    if (typeof content !== "undefined") {
        if (typeof content === "string") {
            content = document.createTextNode(content);
        }

        e.appendChild(content);
    }

    return e;
}

function addRow( rowData ) {
    var tr = createElement('tr');

    for (var key in rowData) {
        tr.appendChild( createElement('td', rowData[key]) );
    }

    return tr;
}

您需要做的就是设置数据和目标。

使用javascript根据php数组创建li

4 个答案: