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

时间:2017-03-08 08:01:23

标签: javascript php html-table

Why The Data Cant be displayed?

我需要你的帮助来解决我的问题。从数据库中选择数据到表格tbody时我遇到了问题。我试着去做并尝试运行它。但是数据无法显示。我将文件HTML,PHP和Javascript分成不同的文件类型。请帮我..!如果你举个例子,我将不胜感激。

这是HTML,PHP和JQUERY CODE

<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>
            <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>
<input type="button" value="Click Here" id="ajaxButton"/>
<div id="result"></div>
</body>
</html>
$(document).ready(function() {
    $("#ajaxButton").click(function() {
        $.ajax({
              type: "Post",
              url: "employee.php",
              success: function(data) {
                var tr = "<tr>";
                    tr += "<td>"+data['no']+"</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 += "<td>"+data['sensor10']+"</td>";
                    tr += "<td>"+data['sensor11']+"</td>";
                    tr += "<td>"+data['sensor12']+"</td>";
                    tr += "<td>"+data['ambien']+"</td>";
                    tr += "<td>"+data['average']+"</td>";
                    tr += "<td>"+data['deffiasi']+"</td>";
                    tr += "<td>"+data['status']+"</td>";
                    tr += "</tr>";
                $("#table_s tbody").append(tr);
              }
        }); 
    });
});
<?php
//connect to the mysql
$db = @mysql_connect('localhost', 'root', '') or die("Could not connect database");
@mysql_select_db('silo', $db) or die("Could not select database");

//database query
$sql = @mysql_query("select no,s_tanggal,silo,sensor1,sensor2,sensor3,sensor4,sensor5,sensor6,sensor7,sensor8,sensor9 from termocouple");

$rows = array();
while($r = mysql_fetch_assoc($sql)) {
  $rows[] = $r;
}

//echo result as json
echo json_encode($rows);
?>

2 个答案:

答案 0 :(得分:0)

您从json_encode

获取数组

因此您应该通过索引访问,例如:for index 0

  tr += "<td>"+data[0]['no']+"</td>";

你可能需要一个jsonData = JSON.parse(数据),例如:

   jsonData = JSON.parse(data);
   tr += "<td>"+jsonData[0].no +"</td>";

答案 1 :(得分:0)

This is the Result but only get one record. i have 3 record from database数据是二维的 And the second screenshot after i click 推荐使用mysqli或PDO

$(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['sensor4'] + "</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);
            }
        });
    });
});