如何在表的tbody中使用json编码显示数据库值

时间:2017-03-07 08:26:32

标签: php jquery json html-table display

我正在尝试使用JSON编码显示数据库值,但我不知道如何在我在HTML表单中设置的表中显示它。谁知道怎么做?如果你举个例子,我将不胜感激。

这是我的桌子和我的PHP函数。

<?php 

  //--------------------------------------------------------------------------
  // Example php script for fetching data from mysql database
  //--------------------------------------------------------------------------
  $host = "localhost";
  $user = "root";
  $pass = "";

  $databaseName = "silo";
  $tableName = "temp1";

  //--------------------------------------------------------------------------
  // 1) Connect to mysql database
  //--------------------------------------------------------------------------

  $con = mysql_connect($host,$user,$pass);
  $dbs = mysql_select_db($databaseName, $con);

  $tanggal=$_POST['datepicker'];
  $silo=$_POST['silo'];
  //--------------------------------------------------------------------------
  // 2) Query database for data
  //--------------------------------------------------------------------------
  $result = mysql_query("SELECT * FROM $tableName");          //query
  $array = mysql_fetch_row($result);                          //fetch result 

  if($array>0){
    while($row=mysql_fetch_array($result)){

    }   
 }else{
    echo "<li>Tidak ada artikel yang ditemukan <li>";
 }
  //--------------------------------------------------------------------------
  // 3) echo result as json 
  //--------------------------------------------------------------------------
  echo json_encode($array);

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

4 个答案:

答案 0 :(得分:0)

您的阵列上不需要json_encode,您可以通过执行$ array ['column name']来访问数组中的每一列。例如,如果您有一个包含用户名和密码的用户表,并且需要获取它们,则执行$array['username']$array['password']

查看您的代码,似乎您想逐个显示它们:

while($row=mysql_fetch_array($result)){
    echo "<tr> $row['column name'] </tr>";
}

答案 1 :(得分:0)

您可以像这样生成<tbody>的HTML。

 if($array>0){
    $tableHTML = "<tbody>";
    while($row=mysql_fetch_array($result)){
        $tableHTML .= "<tr>";
        $i=0;
        foreach ($row as $key=>$val) {
            $tableHTML .= "<td id='td_s".$i."'>".$row[$key]."</td>";
            $i++;
        }
        $tableHTML .= "</tr>";
    }   
    $tableHTML .= "<tbody>";
 }else{
    echo "<li>Tidak ada artikel yang ditemukan <li>";
 }

您会将列附加到每个<td>以创建表格。

完整代码

<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>
<?php
 $tableHTML = "";
 if($array>0){
    $tableHTML .= "<tbody>";
    while($row=mysql_fetch_array($result)){
        $tableHTML .= "<tr>";
        $i=0;
        foreach ($row as $key=>$val) {
            $tableHTML .= "<td id='td_s".$i."'>".$row[$key]."</td>";
            $i++;
        }
        $tableHTML .= "</tr>";
    }   
    $tableHTML .= "<tbody>";
 } else{
    echo "<li>Tidak ada artikel yang ditemukan <li>";
 }

 echo $tableHTML; //echo the HTML of tbody

 ?>
  </table>

Jquery代码

$( document ).ready(function() {
    $('#ok').on('click', 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);
      }
      });

    });
});

只需使用此代码即可。我希望它有所帮助。

答案 2 :(得分:0)

<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>
                <?php do { ?>
          <tr>
            <td id="td_s0"><?php echo $row_Recordset1['no']; ?></td>
            <td id="td_s1"><?php echo $row_Recordset1['sensor1']; ?></td>
            <td id="td_s2"><?php echo $row_Recordset1['sensor2']; ?></td>
            <td id="td_s3"><?php echo $row_Recordset1['sensor3']; ?></td>
            <td id="td_s4"><?php echo $row_Recordset1['sensor4']; ?></td>
            <td id="td_s5"><?php echo $row_Recordset1['sensor5']; ?></td>
            <td id="td_s6"><?php echo $row_Recordset1['sensor6']; ?></td>
            <td id="td_s7"><?php echo $row_Recordset1['sensor7']; ?></td>
            <td id="td_s8"><?php echo $row_Recordset1['sensor8']; ?></td>
            <td id="td_s9"><?php echo $row_Recordset1['sensor9']; ?></td>
            <td id="td_s10"><?php echo $row_Recordset1['sensor10']; ?></td>
            <td id="td_s11"><?php echo $row_Recordset1['sensor11']; ?></td>
            <td id="td_s12"><?php echo $row_Recordset1['sensor12']; ?></td>
            <td id="td_s13"><?php echo $row_Recordset1['ambien']; ?></td>
            <td id="td_s14"><?php echo $row_Recordset1['average']; ?></td>
            <td id="td_s15"><?php echo $row_Recordset1['deffiasi']; ?></td>
            <td id="td_s16"><?php echo $row_Recordset1['status']; ?></td>
          </tr>
          <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
            </tr>
      </tbody>
      </table>

这就是我的意思..我的桌子的tbody有一个记录的值。 我可以将您编辑过的脚本的回声再次置于其中吗?或者我可以将回声置于jquery中吗?

答案 3 :(得分:0)

JQUERY CODE

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

    $.ajax({                                      
      url: '../php/termo_sel.php',                           
      data: "",                        
      dataType: 'json',                     
      success: function(data)         
      {
        var id = data[0];             
        var tanggal = data[1];
        var silo = data[2];
        var sensor1 = data[3];
        var sensor2 = data[4];
        var sensor3 = data[5];
        var sensor4 = data[6];
        var sensor5 = data[7];
        var sensor6 = data[8];
        var sensor7 = data[9];
        var sensor8 = data[10];
        var sensor9 = data[11];
        var sensor10= data[12];
        var ambien= data[13];
        var average= data[14];
        var deffiasi= data[15];
        var status= data[16];

        $('#data_area').html("<b></b>"+id+"<b></b>"+tanggal); //Set output element html
        //recommend reading up on jquery selectors they are awesome 
        // http://api.jquery.com/category/selectors/
      }
    });

    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('');
    });


}

HTML代码

<div id="kanan"  class="btn btn-default" style="padding-left:20px" >
    <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>
                <?php do { ?>
          <tr>
            <td id="td_s0"><?php echo $row_Recordset1['no']; ?></td>
            <td id="td_s1"><?php echo $row_Recordset1['sensor1']; ?></td>
            <td id="td_s2"><?php echo $row_Recordset1['sensor2']; ?></td>
            <td id="td_s3"><?php echo $row_Recordset1['sensor3']; ?></td>
            <td id="td_s4"><?php echo $row_Recordset1['sensor4']; ?></td>
            <td id="td_s5"><?php echo $row_Recordset1['sensor5']; ?></td>
            <td id="td_s6"><?php echo $row_Recordset1['sensor6']; ?></td>
            <td id="td_s7"><?php echo $row_Recordset1['sensor7']; ?></td>
            <td id="td_s8"><?php echo $row_Recordset1['sensor8']; ?></td>
            <td id="td_s9"><?php echo $row_Recordset1['sensor9']; ?></td>
            <td id="td_s10"><?php echo $row_Recordset1['sensor10']; ?></td>
            <td id="td_s11"><?php echo $row_Recordset1['sensor11']; ?></td>
            <td id="td_s12"><?php echo $row_Recordset1['sensor12']; ?></td>
            <td id="td_s13"><?php echo $row_Recordset1['ambien']; ?></td>
            <td id="td_s14"><?php echo $row_Recordset1['average']; ?></td>
            <td id="td_s15"><?php echo $row_Recordset1['deffiasi']; ?></td>
            <td id="td_s16"><?php echo $row_Recordset1['status']; ?></td>
          </tr>
          <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
            </tr>
      </tbody>
      </table>

PHP代码     

  //--------------------------------------------------------------------------
  // Example php script for fetching data from mysql database
  //--------------------------------------------------------------------------
  $host = "localhost";
  $user = "root";
  $pass = "";

  $databaseName = "silo";
  $tableName = "temp1";

  //--------------------------------------------------------------------------
  // 1) Connect to mysql database
  //--------------------------------------------------------------------------

  $con = mysql_connect($host,$user,$pass);
  $dbs = mysql_select_db($databaseName, $con);

  $tanggal=$_POST['datepicker'];
  $silo=$_POST['silo'];
  //--------------------------------------------------------------------------
  // 2) Query database for data
  //--------------------------------------------------------------------------
  $result = mysql_query("SELECT * FROM $tableName");          //query
  $array = mysql_fetch_row($result);                          //fetch result 

  if($array>0){
    while($row=mysql_fetch_array($result)){

    }   
 }else{
    echo "<li>Tidak ada artikel yang ditemukan <li>";
 }
  //--------------------------------------------------------------------------
  // 3) echo result as json 
  //--------------------------------------------------------------------------
  echo json_encode($array);

?>

其中三个在3个文件中分开。 .php,.html,.js