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比较简洁,推荐使用,效果如下:

  • 相关阅读:
    Vue 获取dom元素中的自定义属性值
    php文件包含
    php数组运算符
    管理一组事物的状态
    php数据类型转换
    php函数
    PHP循环while do while循环
    php的流程控制 if elseif swich case for循环
    php的工作原理
    python算数、逻辑运算,位运算
  • 原文地址:https://www.cnblogs.com/liesun/p/9196555.html
Copyright © 2011-2022 走看看