JS实现动态修改table及合并单元格的方法示例_js表格合并

12 浏览量更新于2023-05-10 收藏 49KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

JS实现动态修改实现动态修改table及合并单元格的方法示例及合并单元格的方法示例

主要介绍了JS实现动态修改table及合并单元格的方法,结合完整实例形式分析了JS动态遍历及修改table单元格

的具体操作技巧,需要的朋友可以参考下

本文实例讲述了JS实现动态修改table及合并单元格的方法。分享给大家供大家参考，具体如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>table</title>

function maketotal(){

var pageCount=4;

var currenttype;

var indexstr="";

var tabObj = document.getElementById("printtable");

//行数

var rowCount = tabObj.rows.length;

//列数

var cellCount = tabObj.rows[0].cells.length;

for(var q=1;q<rowCount;q++){

choosetype=tabObj.rows[q].cells[0].innerHTML;

if(q==1){

currenttype=choosetype;

}

if(currenttype!=choosetype){

indexstr=q+","+indexstr;

}

alert(indexstr.split(",").length);

for(var p=0;p<indexstr.split(",").length;p++){

var temp=indexstr.split(",")[p];

if(temp!=""){

var newRow = tabObj.insertRow(temp);

for(var g=0;g<cellCount;g++)

{

var littleCount=0;

for(var h=1;h<rowCount;h++){

if(tabObj.rows[h].cells[g]){

if(g>1){

littleCount=littleCount+parseInt(tabObj.rows[h].cells[g].innerHTML);

}

if(g>1&&g!=6){

newRow.insertCell(g).innerHTML=littleCount;

}else if(g==6){

newRow.insertCell(g).innerHTML="";

}else{

newRow.insertCell(g).innerHTML="小计";

}

var newRow = tabObj.insertRow(0);

for(var g=0;g<cellCount;g++)

{

if(g==0){

//newRow.insertCell(g).innerHTML="头部";

}else{

//newRow.insertCell(g).innerHTML="头部";

}

//alert(tabObj.rows[1].cells[g]);

newRow.insertCell(g).innerHTML="头部";

//tabObj.rows[0].cells[g].colsSpan =2;

//tabObj.rows[0].cells[g].rowsSpan =2;

tabObj.rows[1].cells[g].style.background="#CCCCCC";

tabObj.rows[0].cells[g].style.background="#CCCCCC";

//tabObj.rows[0].cells[g].rowSpan=2

}

tabObj.rows[0].cells[2].colSpan =2;

tabObj.rows[0].cells[2].innerHTML="反映形式";

tabObj.rows[0].cells[3].colSpan =2;

tabObj.rows[0].cells[3].innerHTML="待处理业务数";

tabObj.rows[0].cells[4].colSpan =1;

tabObj.rows[0].cells[4].innerHTML="反映形式";

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38684509

粉丝: 4
资源: 916

会员权益专享

JS实现动态修改table及合并单元格的方法示例

jquery 动态合并单元格的实现方法

table-rowspan表格自动合并单元格插件

jquery.table.rowspan.js 表格自动合并单元格插件

el-table 动态合并单元格

el-table合并单元格

el-table 手动选择单元格点击右键合并单元格

BOOTstrap table动态合并居中单元格

js里表格如何合并单元格

帆软 JS 合并单元格

el-table实现手动选择单元格进行合并

el-table 合并单元格，前一列如果没合并，后面列则无需再合并

el-table中存在单元格合并，如何做表格导出

vue3 element-puls el-table 汇总行单元格合并

uniapp表格合并单元格

用js写合并表格单元格

h5实现把框选的单元格合并成一个单元格

layui合并单元格

layui treegrid 合并单元格

js 合并 值相同的单元格

vue有单元格合并的操作吗

会员权益专享

最新资源

js 合并值相同的单元格