zoukankan      html  css  js  c++  java
  • 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比较简洁,推荐使用,效果如下:

  • 相关阅读:
    Poj(1703),种类并查集
    Poj(2236),简单并查集
    Poj (3239),m皇后问题
    Poj(1521),哈夫曼编码
    NYOJ(680),摘枇杷,(暴力,或者二分搜索)
    NYOJ(42)欧拉图
    数集合有多少个TOJ(2469)
    HDU(1016),打素数环
    HDU(4394),数论上的BFS
    Poj(2225),三维BFS
  • 原文地址:https://www.cnblogs.com/liesun/p/9196555.html
Copyright © 2011-2022 走看看