создайте li в соответствии с массивом php с помощью javascript

ProgramBox

создайте li в соответствии с массивом php с помощью javascript

Post author:admin
Запись опубликована:3 сентября, 2022
Post category:Вопросы по программированию

#javascript #php #arrays

#javascript #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)
                     )

И в моем HTML у меня есть div с идентификатором class .

Что я хотел бы сделать, так это создать таблицу с этим PHParray, используя JavaScript, но только при нажатии label id=»labletocreatetable», таблица должна выглядеть следующим образом

я знаю, что я должен использовать json_encode, но когда я это делаю, результат выглядит так, и я не совсем уверен, как его использовать

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

1. Как вы получили его в своем JavaScript , это уже доступно?

2. Возможно, подумайте о преобразовании данных и последующем их отображении. Например, похоже, что данные расположены горизонтально, напишите функцию для реструктуризации массива, а затем отобразите его. Тогда его будет намного проще отображать.

3. невозможно действительно реструктурировать массив php, потому что каждая строка принадлежит записи в базе данных

Ответ №1:

я не уверен, чего вы хотели, но это может вам помочь

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

вывод

введите описание изображения здесь

Ответ №2:

Попробуйте это:

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

ДЕМОНСТРАЦИЯ.

Проблема с вашей структурой заключается в том, что мы не знаем столбцы заранее, и это for..in перебирает объекты в произвольном порядке.

Затем я создал массив для хранения столбцов по порядку, и для каждой строки я сначала перебираю эти столбцы, а затем перебираю оставшиеся (в любом порядке) и помещаю их в массив.

Если вы не хотите стирать данные, вот альтернативная демонстрация.

Ответ №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. -->

Ответ №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;
}

Все, что вам нужно сделать, это установить данные и цель.

Метки: создайте li в соответствии с массивом php с помощью javascript