如何将数据库表中的所有记录行显示到表中

时间:2017-03-09 01:27:04

标签: php jquery mysql html-table

我正在尝试创建一个可以获取数据库表值的所有行记录的表。我已经做到了,我可以做到,但数据记录只显示记录数据库表中的一个数据,并且它总是将记录值循环到右边,同时我单击按钮将记录显示到表中。有谁知道我的代码有什么问题吗?

这是php,jquery和html脚本,以及页面的屏幕截图:

enter image description here

$(document).ready(function() {
    $("#ajaxButton").click(function() {
        $.ajax({
            type: "Post",
            url: "employee.php",
            success: function(data) {
                var list = JSON.parse(data);
                var tr = "";
                $.each(list, function(i, v) {
                    tr = +"<tr>";
                    tr += "<td>" + v['no'] + "</td>";
                    tr += "<td>" + v['sensor1'] + "</td>";
                    tr += "<td>" + v['sensor2'] + "</td>";
                    tr += "<td>" + v['sensor3'] + "</td>";
                    tr += "<td>" + v['sensor4'] + "</td>";
                    tr += "<td>" + v['sensor5'] + "</td>";
                    tr += "<td>" + v['sensor6'] + "</td>";
                    tr += "<td>" + v['sensor7'] + "</td>";
                    tr += "<td>" + v['sensor8'] + "</td>";
                    tr += "<td>" + v['sensor9'] + "</td>";
                    tr += "<td>" + v['sensor10'] + "</td>";
                    tr += "<td>" + v['sensor11'] + "</td>";
                    tr += "<td>" + v['sensor12'] + "</td>";
                    tr += "<td>" + v['ambien'] + "</td>";
                    tr += "<td>" + v['average'] + "</td>";
                    tr += "<td>" + v['deffiasi'] + "</td>";
                    tr += "<td>" + v['status'] + "</td>";
                    tr += "</tr>";

                });
                $("#table_s tbody").append(tr);
            }
        });
    });
});
            row += '<td>' + data.rows[i].date + '</td>';
            row += '<td>' + data.rows[i].company + '</td>';
            row += '<td>' + data.rows[i].location + '</td>';
<html>
<head>
<script language="javascript" type="text/javascript" src="jquery-1.6.2.js"></script>
<script language="javascript" type="text/javascript" src="ajax.js"></script>
</head>
<body>
<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>

      </tbody>
      </table>
<input type="button" value="Click Here" id="ajaxButton"/>

</body>
</html>
<?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;


}

echo json_encode($rows);
mysqli_close($con);
?> 

1 个答案:

答案 0 :(得分:0)

你应该在循环中追加tr。

success: function(data){
  var list = JSON.parse(data);
  for(var i = 0; i < list.length; i++){
    var tr = "<tr>";
    tr += "<td>"+list[i]['no']+"</td>";
    tr += "<td>"+list[i]['sensor1']+"</td>";
    tr += "<td>"+list[i]['sensor2']+"</td>";
    tr += "<td>"+list[i]['sensor3']+"</td>";
    tr += "<td>"+list[i]['sensor4']+"</td>";
    tr += "<td>"+list[i]['sensor5']+"</td>";
    tr += "<td>"+list[i]['sensor6']+"</td>";
    tr += "</tr>";
    $("#table_s tbody").append(tr);
  }
}