【问题标题】:How to display Database Value In a Table?如何在表格中显示数据库值?
【发布时间】:2017-03-10 02:56:51
【问题描述】:

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

这是 HTML、PHP 和 JQUERY 代码

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

【问题讨论】:

  • 那么html在哪里?
  • 尝试console.log(data)并在此处给出输出
  • 抱歉发错了..我已经编辑了代码
  • 不要使用mysql_*函数。它们自 PHP 5.5.0 起被弃用,并在 PHP 7.0 中被删除。旧的 MySQL 扩展存在一些安全问题。请改用PDOMySQLi

标签: javascript php html-table


【解决方案1】:

data 是二维的 推荐使用 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);
            }
        });
    });
});

【讨论】:

  • btw .. 如何使它选择所有数据?它只是选择了单个数据
  • 我不明白你的意思
  • 该代码只选择了一行。如何获得所有记录?使用获取数组?
  • 您的代码已经读取了所有数据,您的数据库中只有一个数据?
  • 我的数据库有 3 条记录。但我不知道为什么它只显示一条记录
【解决方案2】:

你从你的 json_encode 中获得一个数组

所以您应该按索引访问,例如:对于索引 0

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

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-07-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-06-23
    • 1970-01-01
    • 2015-12-23
    相关资源
    最近更新 更多