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

原文地址:https://www.cnblogs.com/liesun/p/9196555.html

时间: 2024-10-09 07:49:46

HTML通过使用JS动态显示table内容的相关文章

js导出table中的EXCEL总结

导出EXCEL一般是用PHP做,但是项目中,有时候PHP后端工程师返回的数据不是我们想要的,作为前端开发工程师,把对应的数据编号转换为文字后,展示给用户,但是,需求要把数据同时导出一份EXCEl.无奈之下,我只能用js导出table中的数据了. 导出EXCEl一般是自己人用的,所以用js导出,因为js导出EXCEL一般情况下兼容性不是很好,很多只是兼容IE浏览器,还要设置在工具栏中进行设置才能导出,因为会相对比较烦.下面介绍几种方法: 一.js导出EXCEl带单元格合并[已验证,比较好用] //

js在table指定tr行上或底下添加tr行

js在table指定tr行上或下面添加tr行 function onAddTR(trIndex)         {             var tb = document.getElementById("tb1");             var newTr = tb.insertRow(trIndex);//添加新行,trIndex就是要添加的位置             var newTd1 = newTr.insertCell();             newTd1.

第十三篇 JS 操作table表格

JS 操作table表格 这节课难度可能高一点,因为没有提前解释if判断.for循环.这节课是直接把这两样用上了,老师先简单介绍一下: if,判断语句,判断就很简单了嘛,假如说1=1(1等于1),当然是真的了对吧,那么1=2呢,那就是假的,因为正常情况下,1不可能等于2,1就是1.那么我们在JS里写一个: var a=1; if(a=1){ alert('正确'); }else{ alert('错的'); } 给一个变量,来做判断,大家记住,if也有它的规则,先一个if,圆括号做判断,随后一个花

js 前端 table 导出 excel

园子,github,stackoverflow 关于前端下载的文章不少 园子里大部分都是 利用ActiveXObject对象来实现,可他有个缺点安全等级,还有必须安装excel…… github,stackoverflow  有点高大上了,几乎全是英文……无奈只能看看代码了,还好找到了一个比较好的方法 直接上代码:还是看原文好 https://github.com/rainabba/jquery-table2excel http://stackoverflow.com/questions/171

js在table中添加tbody块,方便整块的添加和删除

利用js在table中添加tbody块,方便整块的添加和删除,以下为添加. <table width="400" border="1" cellspacing="0" cellpadding="0" id="table1"> </table> <script language="javascript"> var value = "内容&quo

atitit.js的&#160;字符串内容&#160;转义&#160;&#160;js处理html

atitit.js的 字符串内容 转义  js处理html 1. js处理html的问题 1 2. js的 字符串内容 转义 1 2.1. 处理流程 1 3. 下面的表格列出了其余的特殊字符,这些特殊字符都可以使用反斜杠来添加到文本字符串中: 2 4. --code 2 1. js处理html的问题 反斜杠问题 引号问题.回车换行造成的语句中断问题.. 2. js的 字符串内容 转义 一个回车 还有一个换行转义 一个引号转义.. 反斜杠转义 2.1. 处理流程 先替换反斜杠.在引号,在回车,在换

Atitit &#160;&#160;发帖机实现(3 )---usrQBN023 js提交ajax内容到后端规范与标准化

Atitit   发帖机实现(3 )---usrQBN023 js提交ajax内容到后端规范与标准化 大段内容务必要替换转义换行符号1 提交务必使用utf编码,否则解码后的可能缺失,是web server的bug应该.Resin4.0.221 大段内容务必要替换转义换行符号 C:\0workspace\AtiPlatf_cms\WebRoot\poster\gejy_pub.js cmd= cmd.replace(new RegExp("\r\n",'gm'),"\\r\\n

Node.js读写中文内容文件操作

由于Node.js仅支持如下编码:utf8, ucs2, ascii, binary, base64, hex,并不支持中文GBK或GB2312之类的编码, 因此如果要读写中文内容,必须要用额外的模块:iconv-lite 注:Node的iconv模块,仅支持linux,不支持Windows,因此要用纯js的iconv-lite,另:作者说iconv-lite的性能更好,具体参考git站点:iconv-lite 注2:我在测试读写文件时,始终无法把中文写入文件,一直乱码,读取正常,后来同事帮我发

js创建table / 删除一行tr

代码: <!DOCTYPE html><html><head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> </head><body> </body> <script type="text/javascript"