使用javascript根据php数组创建li

我从数据库中得到一个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的表，但只有在单击label id=“labletocreatetable”时，该表才应该是这样的

a b c
1 1 1 
2 2 2 
3 3 3 

我知道我应该使用json_编码，但当我这样做时，结果是这样的，我不太确定如何使用它

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

试试这个：

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);

var-arr=[
{“a”：“1”，“b”：“1”，“c”：“1”}，
{“a”：“2”，“b”：“2”，“c”：“2”}，
{“a”：“3”，“b”：“3”，“c”：“3”}
]，cols=[]；
//要克隆的元素：
var tr=document.createElement（'tr'），
td=document.createElement（'td'）；
函数addCell（文本，行）{
var cell=td.cloneNode（假）；
cell.appendChild（document.createTextNode（text））；
子行（单元格）；
}
//正文：
var tbody=document.createElement（'tbody'）
对于（var i=0；i

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

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

如果您不想删除数据，这里有一个。
我不确定您想要什么，但这可能会对您有所帮助

<?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>';
}

为此，您需要使用ajax。我已经编写了步骤

1） a.html

--包含jQuery库--


单击以创建表
函数createTheTable（）{
$.ajax({
url:“获取内容.php”，
成功：功能（结果）{
$（“#div1”）.html（结果）；//将加载内容的DIV
}
});
}

2） 获取\u 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. -->


试试这个（）：

//用PHP设置
变量数据=[{“a”：“1”，“b”：“1”，“c”：“1”}，
{“a”：“2”，“b”：“2”，“c”：“2”}，
{“a”：“3”，“b”：“3”，“c”：“3”}]；
//将其设置为目标html元素
var target=document.getElementsByTagName（'body'）[0]；
//创建表格并添加标题
var table=createElement（'table'）；
table.appendChild（addRow（Object.keys（数据[0]））；
//添加行
对于（var r=0；rHow您在
JavaScript
中得到它了吗？这已经可用了吗？也许可以考虑转换数据，然后显示它。例如，数据看起来是水平的。编写一个函数来重新构造数组，然后再显示它。这样显示起来会容易得多。无法真正重新构造php数组，因为se每一行都属于数据库中的一条记录感谢effor，但这是使用php，我需要使用javascript
<?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. -->

// 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;
}