HTML通過使用JS動態顯示table內容


HTML:

<table border="1" id="tb">
   <thead>
    <caption>歷史知識點對比</caption>
    <tr>
      <th rowspan="2">知識點</th>
      <th rowspan="2">全校得分率</th>
      <th rowspan="2">上次考試教師授課班級得分率</th>
      <th rowspan="2">本次考試教師授課本機得分率</th>
      <th colspan="3">本次分班級</th>
      <th rowspan="2">神經網絡預測得分率</th>
       </tr>
       <tr>
      <th>1班</th>
      <th>2班</th>
      <th>3班</th>
    </tr>
  </thead>

</table>

 

 

JS:

/*動態顯示表格內容*/
    window.onload=function(){
        $.ajax({
            type:"get",
            url:"/getTableData",
            data:{},
            async: false,
            success:function (data) {
                //var data = eval('('+data+')');
                for(var i=0;i < data.length;i++){
                    var x=document.getElementById('tb').insertRow();
                    for(var j=0;j < data[i].length;j++){
                        var cell=x.insertCell();
                        cell.innerHTML=data[i][j];
                    }
                }
           }
        });
    }

 

主要使用了DOM的insertRow以及insertCell方法,該JS比較簡潔,推薦使用,效果如下:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM