时间戳

首页 > 解决方案 > 如何显示表格中的所有数据？

javascript - 如何显示表格中的所有数据？

问题描述

1.这是我的 HTML 表格代码，我无法使用下面的 javascript 代码显示其中的数据。

<table id="empTable">
    <tr>
      <th>Type</th>
      <th>SimiScore</th>
      <th>Rank</th>
      <th>Introversion/Extraversion</th>
      <th>Intuitive/Observant</th>
      <th>Thinking/Feeling</th>
      <th>Judging/Perceiving</th>
    </tr>  
    {% for doc in docs %}
    <tr>
      <td>{{doc["type"]}}</td>
      <td>{{doc["Simiscore"]}}</td>
      <td>{{doc["Rank"]}}</td>
      <td>{{doc["Introversion/Extraversion"]}}</td>
      <td>{{doc["Intuitive/Observant"]}}</td>
      <td>{{doc["Thinking/Feeling"]}}</td>
      <td>{{doc["Judging/Perceiving"]}}</td>
    </tr>
    {% endfor %}
</table>

<p><input type="button" id="bt" value="Show Table Data" onclick="showTableData()" /></p>
<p id="info"></p>

2.这是我显示数据的javascript代码，但我无法显示

<script>
    function showTableData() {
        document.getElementById('info').innerHTML = "";
        var myTab = document.getElementById('empTable');
        // LOOP THROUGH EACH ROW OF THE TABLE AFTER HEADER.
        for (i = 1; i < myTab.rows.length; i++) {
        // GET THE CELLS COLLECTION OF THE CURRENT ROW.
            var objCells = myTab.rows.item(i).cells;
        // LOOP THROUGH EACH CELL OF THE CURENT ROW TO READ CELL VALUES.
            for (var j = 0; j < objCells.length; j++) {
                info.innerHTML = info.innerHTML + ' ' + objCells.item(j).innerHTML;
            }
            info.innerHTML = info.innerHTML + '<br />';     // ADD A BREAK (TAG).
        }
    }
</script>

标签： javascripthtml

解决方案

{

   $(document).ready(function()
 {
$.ajax({
    url: "getjson.php", 
    type: "POST",    
    dataType:"json",   
    success: function (response) 
    {
      var trHTML = '';
      $.each(response, function (key,value) {
         trHTML += 
            '<tr><td>' + value.id + 
            '</td><td>' + value.konu + 
            '</td><td>' + value.aciklama + 
            '</td><td>' + value.giris_tarih + 
            '</td><td>' + value.degistirilme_tarih + 
            '</td><td>' + value.ad_soyad + 
            '</td><td>' + value.email + 
            '</td></tr>';     
      });

        $('#records_table').append(trHTML);
    }   
});

});

 }

这是您可以使用的示例

推荐阅读