文档章节

自动生成表格

j
 jessie_lyj1
发布于 2017/03/23 19:22
字数 667
阅读 16
收藏 1

<!DOCTYPE html> 
<html> 
 <head> 
 <title>createTable2.html</title> 
 <style type="text/css"> 
  table{ 
   border:#00ffff solid 2px; 
   border-collapse:collapse; 
  } 
  td{ 
   border:#8080ff solid 2px; 
    padding:10px; 
  } 
 </style> 
 <script type="text/javascript"> 
      var tableNode; 
      function createTable(){ 
        tableNode=document.createElement("table");//获得对象 
       tableNode.setAttribute("id","table") 
       var row=parseInt(document.getElementsByName("row1")[0].value);//获得行号 
       //alert(row); 
       if(row<=0 || isNaN(row) ){ 
        alert("输入的行号错误,不能创建表格,请重新输入:"); 
        return; 
       } 
        var cols=parseInt(document.getElementsByName("cols1")[0].value); 
       if(isNaN(cols) || cols<=0){ 
        alert("输入的列号错误,不能创建表格,请重新输入:"); 
        return; 
       } 
       //上面确定了 现在开始创建 
       for(var x=0;x<row;x++){ 
        var trNode=tableNode.insertRow(); 
        for(var y=0;y<cols;y++){ 
         var tdNode=trNode.insertCell(); 
         tdNode.innerHTML="单元格"+(x+1)+"-"+(y+1); 
        } 
       } 
       document.getElementById("div1").appendChild(tableNode);//添加到那个位置 
      } 
 /* function delRow(){ 
   //要删除行,必须得到table对象才能删除,所以在创建的时候必须要设置table对象的 id 方便操作 
   var tab=document.getElementById("table");//获得table对象 
   if(tab==null){ 
    alert("删除的表不存在!") 
    return; 
   } 
   var rows=parseInt(document.getElementsByName("delrow1")[0].value);//获得要删除的对象 
   if(isNaN(rows)){ 
    alert("输入的行不正确。请输入要删除的行。。。"); 
    return; 
   } 
   if (rows >= 1 && rows <= tab.rows.length) { 
    tab.deleteRow(rows-1); 
    }else{ 
     alert("删除的行不存在!!"); 
     return ; 
    } <frameset rows="<form method="post" action="">
        
    </form>," cols=",">
        <frame src="" name="">
        <frame src="" name="">
    </frameset>
     
  } 
  //删除列要麻烦些, 要通过行来进行删除 
  // 一行的cells的长度就是列的个数 
  //tab.rows[x].deleteCell(cols-1) 
 function delCols(){ 
   //获得table对象 
   var tab=document.getElementById("table"); 
     
   if(tab==null){ 
    alert("删除的表不存在!!"); 
    return ; 
   } 
   //获得文本框里面的内容 
   var cols=parseInt(document.getElementsByName("delcols1")[0].value); 
   //检查是否可靠 
   if(isNaN(cols)){ 
    alert("输入不正确。请输入要输出的列。。"); 
    return; 
   } 

    if(!(cols>=1 && cols<tab.rows[0].cells.length)){ 
    alert("您要删除的行不存在!!"); 
    return; 
   } 
   for(var x=0;x<tab.rows.length;x++){//所有的行 
    tab.rows[x].deleteCell(cols-1); 
   } 
  } */
   
 </script> 
 </head> 
  
 <body> 
 行:<input type="text" name="row1"/> 
 列:<input type="text" name="cols1"/> 
 <input type="button" value="创建表格" onclick="createTable()"/><br/> 
   
 <!--<input type="text" name="delrow1"/> 
 <input type="button" value="删除行" onclick="delRow()"/><br/> 
   
 <input type="text" name="delcols1"/> 
 <input type="button" value="删除列" onclick="delCols()"/><br> -->
 <div id="div1"></div> 
 </body> 
</html>
 

 

 

延伸:

根据数据量,自动生成表格,并添加数据内容


 <div  class="row"><div id="div1" class="col-md-12">&nbsp;</div></div>  

//后台数据为

List<ProPubOption> lst = proPubOptionService.getProPubOptionByType(proPubOptionType.getId());
        modelAndView.addObject("proPubOptionLst", gson.toJson(lst));

 

//Js 脚本为

var lst=${sysPubOptionLst};
 var rowNum  ="${rowNum}";
       var tableNode; 
       function createTable(){ 
       tableNode=document.createElement("table");//获得对象 
       tableNode.setAttribute("id","table"); 
       //alert("rowNum=" + rowNum);
       var row= Math.ceil(rowNum/4); //parseInt(document.getElementsByName("row1")[0].value);//获得行号 
       //alert("row=" + row); 
      
       var cols=4; //parseInt(document.getElementsByName("cols1")[0].value); 
      
       //上面确定了 现在开始创建 
       var i = 0;
       for(var x=0;x<row;x++){ 
        var trNode=tableNode.insertRow(); 
        for(var y=0;y<cols;y++){
            
         var tdNode=trNode.insertCell(); 
         if(i<rowNum){
             var checked="";
             if(lst[i].flg=="1"){
                 checked="checked";
             }
         tdNode.innerHTML="<input type='checkbox' name='test' value="+lst[i].id+ " "+ checked +"/>&nbsp;&nbsp;"+lst[i].field;  
         }
         i = i+1;
        } 
       } 
       document.getElementById("div1").appendChild(tableNode);//添加到那个位置 
      } 

 

© 著作权归作者所有

共有 人打赏支持
j
粉丝 0
博文 46
码字总数 5604
作品 0
天津
私信 提问
快速、灵活的对Table标签进行实例化,让Table标签充满活力。 - GridManager.js

GridManager特色: 原生实现: 无任何框架依赖 宽度调整: 表格的列宽度可进行拖拽式调整 位置更换: 表格的列位置进行拖拽式调整 配置列: 可通过配置对列进行显示隐藏转换 表头吸顶: 在表存在可...

拭目以待
2015/06/12
2.8K
8
其他程序来源的表格、流程等自动生成noForm表单

@刘学炜 你好,想跟你提几个小建议: 一、能把其他程序来源的表格、流程等自动生成noForm表单。 比较常见的有Office文件,例如用Visio画的流程图,用Excel、PPT或Word做的表格、SmartArt图形...

郭策
2018/11/30
0
0
itext pdf生成pdf表格宽度过宽时,能否分页显示

比如excel表格打印时,会自动把宽表格分页显示,利用itext pdf 生成pdf时,如果表格列过多,宽度过大,能否把表格按列拆分,分页显示

cainiaoLi
2015/11/13
1K
0
PDF Report Generator

PDF Report Generator 提供一个简单的方式来在你的程序中创建 PDF 报告。 你将用两个简单的步骤生成一个报告。   第一步是创建一个报告对象。这包括使用一个小的 API 函数集来插入文本、表...

netkongjian
2014/05/23
0
0
asp生成和导出excel和word数据源码和代码,简单好用(已经测试可以用)

生成EXCEL表格(直接放在asp列表内,自动会生成整个页码内table数据) <% Response.ContentType ="application/vnd.ms-excel" Response.AddHeader "Content-Disposition", "attachment; fil......

wuyusky1
2014/06/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【抢购/秒杀】redis实现高并发下的抢购/秒杀功能

问题: 抢购/秒杀是如今很常见的一个应用场景,那么高并发竞争下如何解决超抢(或超卖库存不足为负数的问题)呢? 常规写法: 查询出对应商品的库存,看是否大于0,然后执行生成订单等操作,但...

echojson
21分钟前
2
0
tomcat 集群与 redis 分布式

1.学习

狼王黄师傅
23分钟前
0
0
如何正确的每天坚持背5个单词?

自从开始学习英语,我们的老师就一直告诉我们,如果每天能坚持背五个单词,一年365天就能背1800个单词初中三年,你就能背会5400个单词,背会5400个单词,就算参加高考也搓搓有余。 好吧,话是...

我是菜鸟我骄傲
32分钟前
1
0
Docker之MySql5.7中only_full_group_by的问题解决

MySql的镜像,默认情况下,MySql5.7中的sql_mode含有only_full_group_by,group by语句有时候会报错。通过手动修改sql_mode,那么如果删除容器或者新建容器,就会导致我们手动设置的sql_mod...

克虏伯
49分钟前
0
0
介绍Python中6个序列的内置类型

1、Python中6个序列的内置类型分别是什么? Python包含6中内建的序列,即列表、元组、字符串、Unicode字符串、buffer对象和 xrange 对象。序列通用的操作包括:索引、长度、组合(序列相加)...

问题终结者
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部