如何在表 tbody 中显示数据库值

Question

我需要您的帮助来解决我的问题。从数据库中选择数据到表 tbody 时出现问题。我尝试制作并尝试运行它，但无法显示数据。我将文件 HTML、PHP 和 Javascript 分隔为不同的文件类型。请帮我..！ 如果你能给我一个例子，我将不胜感激。

这是我的代码：

PHP 代码

<?php
$con=mysqli_connect("localhost","root","","silo");

if (!$con) {
  die('Could not connect: ' . mysql_error());
}


// Data for Titik1
$query = mysqli_query($con,"SELECT * FROM termocouple");
$rows = array();
while($tmp= mysqli_fetch_array($query)) {
  $rows[] = $tmp['no'];
    $rows[] = $tmp['s_tanggal'];
    $rows[] = $tmp['silo'];
    $rows[] = $tmp['sensor1'];
    $rows[] = $tmp['sensor2'];
    $rows[] = $tmp['sensor3'];
    $rows[] = $tmp['sensor4'];
    $rows[] = $tmp['sensor5'];
    $rows[] = $tmp['sensor6'];
    $rows[] = $tmp['sensor7'];
    $rows[] = $tmp['sensor8'];
    $rows[] = $tmp['sensor9'];
}
$result = array();
array_push($result,$rows);

print json_encode($result, JSON_NUMERIC_CHECK);

mysqli_close($con);
?> 

HTML 代码

<form name="table_s" id="table_s" class="table_s">
    <table id="table_s" class="table_s"cellspacing='0' class="js-serial" border="2">
        <thead>

      <tr>
                <th><center>No.</center></th>
                <th><center>S1</center></th>
                <th><center>S2</center></th>
                <th><center>S3</center></th>
                <th><center>S4</center></th>
                <th><center>S5</center></th>
                <th><center>S6</center></th>
                <th><center>S7</center></th>
                <th><center>S8</center></th>
                <th><center>S9</center></th>
                <th><center>S10</center></th>
                <th><center>S11</center></th>
                <th><center>S12</center></th>
                <th><center>Ambien</center></th>
                <th><center>Average</center></th>
                <th><center>Deff</center></th>
                <th><center>Status</center></th>
      </tr>

        </thead>
        <tbody>
          <tr>

          <tr>
            <td id="td_s0"></td>
            <td id="td_s1"></td>
            <td id="td_s2"></td>
            <td id="td_s3"></td>
            <td id="td_s4"></td>
            <td id="td_s5"></td>
            <td id="td_s6"></td>
            <td id="td_s7"></td>
            <td id="td_s8"></td>
            <td id="td_s9"></td>
            <td id="td_s10"></td>
            <td id="td_s11"></td>
            <td id="td_s12"></td>
            <td id="td_s13"></td>
            <td id="td_s14"></td>
            <td id="td_s15"></td>
            <td id="td_s16"></td>
          </tr>

      </tbody>
      </table>

JS 代码

$(document).on('click','#ok',function(e) {

      $.ajax({                                      
      url: '../php/termo_sel.php',                           
      data: {datepicker: 'val1', silo : 'val2'}, //Pass data to PHP by POST
      type: 'post',                       
      dataType: 'json',                     
      success: function(data)    //Whatever is put in echo in PHP is returned here     
      {
        $('#table_s').append(data);
      }
      });

    clearInput();

});

function clearInput() {
    $("#form_input :input").each( function() {
       $('#s1').val('');
       $('#s2').val('');
       $('#s3').val('');
       $('#s4').val('');
       $('#s5').val('');
       $('#s6').val('');
       $('#s7').val('');
       $('#s8').val('');
       $('#s9').val('');
       $('#s10').val('');
       $('#s11').val('');
       $('#s12').val('');
       $('#amb').val('35.0');
       $('#avr').val('');
       $('#deff').val('');
       $('#sts').val('');
    });


}

Answer 1

尝试一下：

console.log(data)

它应该是一个 json 数组。你必须循环它。 像 data.name、data.city 等

for(var i = 0;i < data.length;i++)
  {
    alert(data[i].namedata.city);
 }

Answer 2

好的，这里有一些问题。

我会在 PHP 中创建一个关联数组，以便您可以在 javascript 中准确引用它（只需 json_encode $rows，无需将其推送到另一个变量中）

while($tmp= mysqli_fetch_array($query)) {
    $rows['no'] = $tmp['no']; //The "no" in $rows['no'] should be the ID of the element in the HTML you want to put the value into 
    $rows['s_tanggal'] = $tmp['s_tanggal'];
    $rows['silo'] = $tmp['silo'];
    // So On and So Forth
}

print json_encode($rows, JSON_NUMERIC_CHECK);

然后在您的 javascript 中，您可以执行以下操作：

success: function(data){
    for (var key in data) {
        if( $( '#' + key ).length > 0 ){
            $( '#' + key ).append( data[key] )
        }
    }
}

Answer 3

如果json返回值“data”中有表的数据，则应为表体中每一行的每一列设置数据。 eg.在成功函数中，

var tr = "<tr>";
tr += "<td>"+data['no']+"</td>";
tr += "<td>"+data['s_taggal']+"</td>";
tr += "<td>"+data['silo']+"</td>";
tr += "<td>"+data['sensor1']+"</td>";
tr += "<td>"+data['sensor2']+"</td>";
tr += "<td>"+data['sensor3']+"</td>";
tr += "<td>"+data['sensor4']+"</td>";
tr += "<td>"+data['sensor4']+"</td>";
tr += "<td>"+data['sensor6']+"</td>";
tr += "<td>"+data['sensor7']+"</td>";
tr += "<td>"+data['sensor8']+"</td>";
tr += "<td>"+data['sensor9']+"</td>";
tr += "</tr>";
$("#table_s tbody").append(tr);

希望对您有所帮助。