`

js动态生成合并单元格的表格

    博客分类:
  • js
 
阅读更多
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
<style>
TABLE{
font-family: 宋体;
font-size: 9pt;
border-color:#7195c6;
border-collapse :collapse;
border-width:1px
}

td{
border:#336699 1px solid;
font-size:15px;
color:#02027a
}
</style>

</head>
<body>
<script language="JavaScript">
var myData=[["姓名","年龄","年级","地址,电话","手机","备注"],
[null,null,null,"历史","地理","88888888"],
[null,null,null,null,"本例","66666666"],
[null,null,"一年级","北京三环","_","33333333"],
[null,null,"二年级","上海浦东","_","666666"],
[null,"12","三年级","广州深圳","_","33333222"],
[null,null,"四年级","香港九龙","_","32432432"]];         //将所有数据绑定在数组中
var myDataT,rowcell=[];//默认的2个空数组

document.body.appendChild((myDataT = document.createElement("TABLE")));//在当前窗体中动态添加表格
for(var i=0; i<myData.length; i++){  //遍历表格中每项
    var atr = myDataT.insertRow();   //动态添加行
    for(var j=0; j<myData[i].length; j++){//遍历某项中的所有数据
        if (myData[i][j]==null){          //如果值为空,表示需要合并
      
        rowcell[j].rowSpan++;                //使用rowspan
        }
        else if(myData[i][j]=="_"){      //如果是_,则使用colspan
        rowcell[j-1].colSpan++;
        }
        else{
        rowcell[j] = atr.insertCell();      //否则正常添加行
        rowcell[j].innerText=myData[i][j];   //显示行内容
        }
    }
}
</script>
</body>
</html>
分享到:
评论

相关推荐

    js 实现 动态生成包含合并单元格的表格

    js 实现 动态生成包含合并单元格的表格! 值得下载看看!资源免费,大家分享!!

    利用js合并table相同内容单元格并js方式自动生成

    利用js合并table相同内容单元格并js方式自动生成,把文本内容复制进js中,应该就知道大概咋用了

    合并单元格好JS

    合并单元格好JS,特别适用与动态生成表格的单元格合并,报表开发

    Winform导入导出带有合并单元格的Excel

    winform使用Microsoft.Office.Interop.Excel读取带有合并单元格的Excel的demo,Excel版本不限,可以是.xls可以是.xlsx版本。本程序采用webbrowser显示读取的数据,使用bootstrap的css样式美化table表格,使用Json...

    动态合并单元格

    用JS动态合并单元格算法,利用一个结果集List来生成,数据过多会加重客户断负担 --%&gt; ${status.index&gt;=tempEnd}"&gt; &lt;c:set var="rowspanCount" value="0"&gt;&lt;/c:set&gt;清楚历史数据 --%&gt; ${list}" varStatus="status2...

    js自动合并相同单元格Demo

    动态生成表格,并自动合并相同单元格插件,可在bootstrapTable子表使用

    原生JS实现HTML- TABLE 自动行合并插件

    类功能描述:该插件生成一个具有行合并的列表数据,合并例由开发者指定。 开发者提供已排序的数据列表以及需要合并行的列名即可,无需后端二次处理数据。 该类以纯原生JS编写,无需引入任何第三方库。 调用方法:...

    前端导出 excel ,设置字体,列宽,行高,对其方式,合并单元格等效果

    一个导出excel的demo,包含导出的逻辑代码和依赖包,下载以后请执行 npm install ,然后起服务访问,不能直接以 file://打开哦

    merge-table:对HTML表格进行合并拆分操作

    grunt /*运行任务,生成js主文件*/ ###第二步: bower install /*安装依赖库*/ ###第三步: npm start /*运行项目*/ ##API merge 合并多个单元格 MergeTable.merge(); splitH 横拆单元格MergeTable.splitH(); splitV ...

    根据模板,freemarker、xDoc、POI三种方式生成Word文档(含jar包)

    通过三种不同的方式(freemarker+jfreechart、xDoc、POI),根据模板...可以动态修改Word中表格(table)、图表(chart)等数据。导入工程后,可直接运行xxxDemo文件,查看文档生成效果。详见压缩包中的readme文件。

    JS固定表头和左边列(最新源码)1.9

    1.6 修正了当有合并单元格时,锁定单元格错位的问题,修正了表格行数较多时的性能问题 1.7 表格单元格可以不指定宽度(锁定时,取实际的单元格宽度),当单元格的左右两边的borderWidth不一样时,会有一些错位 ...

    使用xlsx.full.min.js导出有复杂表头的excel(亲测有效)

    &gt; 今天项目用到了导出table表格,但表头有点特殊,多个合并的单元格。 &gt; 搜索了半天,发现有博主使用 ``xlsx.full.min.js`` 做过此类功能,使用的是vue+elementUI,特在该基础上改进和封装了一下,兼容普通HTML的js...

    JS固定表头和左边列V2.0(源码)

    1.6 修正了当有合并单元格时,锁定单元格错位的问题,修正了表格行数较多时的性能问题 1.7 表格单元格可以不指定宽度(锁定时,取实际的单元格宽度),当单元格的左右两边的borderWidth不一样时,会有一些错位 若...

    程序天下:JavaScript实例自学手册

    9.22 动态生成包含合并单元格的表格 9.23 用键盘上下键实现表格行的上下选择 9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的...

    dom-to-image.js

    一开始使用的是html2canvas.js。功能是可以实现,但是有缺陷(表格存在合并的单元格时,生成的图片表格线框不完整),后来很不容易知道了dom-to-image.js,尝试之后觉得非常不错

    《程序天下:JavaScript实例自学手册》光盘源码

    9.22 动态生成包含合并单元格的表格 9.23 用键盘上下键实现表格行的上下选择 9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的...

    table-editor:表格编辑器,用于在HTML中创建复杂的表格

    复杂表:当表在任何地方都需要标题单元格,合并的单元格和各种类时 技术文档 这是一个纯静态JavaScript应用程序,可以在任何现代浏览器中运行。 至少在首次加载页面时,它需要Internet连接才能访问TinyMCE的CDN。 ...

    JavaScript网页特效范例宝典源码

    实例204 合并单元格 320 实例205 在表格中添加行及单元格 322 实例206 删除表中的单元格 324 7.5 表格的特殊效果 325 实例207 透明表格 326 实例208 限制表格的宽度 327 实例209 表格的标题 328 实例210 表格的外...

    实验3 客户端脚本编程1

    2. 生成 6 行 8 列的表格 3. 调整表格各栏的高度和宽度,有些单元格需要合并 4. 在单元格中设置字体、字号、字形、颜色、大小等,需要之处添加链接和列

Global site tag (gtag.js) - Google Analytics