javascript合并表格单元格实例代码_javascript技巧-js教程-PHP中文网

首页

web前端

js教程

javascript合并表格单元格实例代码_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:22 PM

javascript 单元格合并表格

本文为大家介绍了一段来源于网络上的代码实例，能够合并单元格，下面和大家分享一下，希望能够给需要的朋友或多或少带来一定的帮助。
代码实例如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>表格单元格合并代码</title>
<script type="text/javascript"> 
function autoRowSpan(tb,row,col){ 
 var lastValue=""; 
 var value=""; 
 var pos=1; 
 for(var i=row;i<tb.rows.length;i++){ 
 value=tb.rows[i].cells[col].innerText; 
 if(lastValue==value){ 
  tb.rows[i].deleteCell(col); 
  tb.rows[i-pos].cells[col].rowSpan=tb.rows[i-pos].cells[col].rowSpan+1; 
  pos++; 
 }
 else{ 
  lastValue=value; 
  pos=1; 
 } 
 } 
} 
window.onload=function(){
 var tb=document.getElementById("tb");
 autoRowSpan(tb,0,0)
}
</script>
</head>
<body>
<table id="tb" border="1">
 <thead>
 <tr >
  <td>国家</td>
  <td>地区</td>
 </tr>
 </thead>
 <tr>
 <td>中国</td>
 <td>河南</td>
 </tr>
 <tr>
 <td>中国</td>
 <td>四川</td>
 </tr>
 <tr>
 <td>中国</td>
 <td>北京</td>
 </tr>
 <tr>
 <td>美国</td>
 <td>纽约</td>
 </tr>
 <tr>
 <td>美国</td>
 <td>洛杉矶</td>
 </tr>
 <tr>
 <td>英国</td>
 <td>伦敦</td>
 </tr>
</table>
</body>
</html>

登录后复制

在为大家分享一段：

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>合并表格</title> 
<script> 
/////////////////////////////////////////////// 
//功能：合并表格 
//参数：tb－需要合并的表格ID 
//参数：colLength－－需要对前几列进行合并，比如， 
//想合并前两列，后面的数据列忽略合并，colLength应为2 
//缺省表示对全部列合并 
//data:2011.11.06 
/////////////////////////////////////////////// 
function uniteTable(tb,colLength){ 
//检查表格是否规整 
if(!checkTable(tb)) return; 
var i=0; 
var j=0; 
var rowCount=tb.rows.length; //行数 
var colCount=tb.rows[0].cells.length; //列数 
var obj1=null; 
var obj2=null; 
//为每个单元格命名 
for(i=0;i<rowCount;i++){ 
for(j=0;j<colCount;j++){ 
tb.rows[i].cells[j].id="tb__" + i.toString() + "_" + j.toString(); 
} 
} 
//逐列检查合并 
for(i=0;i<colCount;i++){ 
if(i==colLength) return; 
obj1=document.getElementById("tb__0_"+i.toString()) 
for(j=1;j<rowCount;j++){ 
obj2=document.getElementById("tb__"+j.toString()+"_"+i.toString()); 
if(obj1.innerText==obj2.innerText){ 
obj1.rowSpan++; 
obj2.parentNode.removeChild(obj2); 
}else{ 
obj1=document.getElementById("tb__"+j.toString()+"_"+i.toString()); 
} 
} 
} 
} 

///////////////////////////////////////// 
//功能：检查表格是否规整 
//参数：tb－－需要检查的表格ID 
//data: 2011.11.06
///////////////////////////////////////// 
function checkTable(tb){ 
if(tb.rows.length==0) return false; 
if(tb.rows[0].cells.length==0) return false; 
for(var i=0;i<tb.rows.length;i++){ 
if(tb.rows[0].cells.length!=tb.rows[i].cells.length) return false; 
} 
return true; 
} 
</script> 
</head> 
<body> 
<table width="400" border="1" id="table1"> 
<tr> 
<td>a</td> 
<td>for</td> 
<td>100</td> 
<td>200</td>
<td>1</td> 
</tr> 
<tr> 
<td>a</td> 
<td>for</td> 
<td>100</td> 
<td>300</td> 
<td>2</td> 
</tr> 
<tr> 
<td>a</td> 
<td>if</td> 
<td>100</td> 
<td>200</td> 
<td>3</td> 
</tr> 
<tr> 
<td>a</td> 
<td>if</td> 
<td>300</td> 
<td>230</td> 
<td>4</td> 
</tr> 
<tr> 
<td>a</td> 
<td>if</td> 
<td>320</td> 
<td>230</td> 
<td>5</td> 
</tr> 
</table> 
<br><input type="button" value="合并表格" onClick="uniteTable(table1,4)"> 
</body> 
</html>

登录后复制

希望本文所述对大家学习javascript程序设计有所帮助。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

Java教程

1655

CakePHP 教程

1413

Laravel 教程

1306

PHP教程

1252

C# 教程

1226

显示更多

Related knowledge

PPT表格中插入的图片调整格式的操作步骤 Mar 26, 2024 pm 04:16 PM

1、新建一个PPT文件，命名为【PPT技巧】，作为示例。2、双击【PPT技巧】，打开PPT文件。3、插入两行两列的表格，作为示例。4、在表格的边框上双击，上方工具栏出现【设计】的选项。5、点击【底纹】的选项，点击【图片】。6、点击【图片】，弹出以图片为背景的填充选项对话框。7、在目录中找到要插入的托，点击确定即可插入图片。8、在表格框上右击，弹出设置的对话框。9、点击【设置单元格格式】，勾选【将图片平铺为底纹】。10、设置【居中】【镜像】等自己需要的功能，点击确定即可。注意：默认为图片填充在表格

wps数值怎样设置按条件自动变色_wps表格数值设置按条件自动变色的步骤 Mar 27, 2024 pm 07:30 PM

1、打开工作表，找到【开始】-【条件格式】按钮。2、点击列选择，选中将添加条件格式的列。3、单击【条件格式】按钮，弹出选项菜单国。4、选择【突出显示条件规则】-【介于】。5、填写规则：20，24，深填充色深绿色文本。6、确定后，所选列中数据按照设定对相应数字文字、单元框加色处理。7、对于没有冲突的条件规则，可以重复添加，但对于冲突规则wps则会以最后添加的规则代替之前建立的条件规则。8、重复添加【介于】规则20-24和【小于】20后的单元列。9、如需改变规则，刚可以清除规则后重新设定规则。

关于销量预测如何制作表格 Mar 20, 2024 pm 03:06 PM

能够熟练的制作表格不仅是会计、人事以及财务的必备技能，对于很多销售人员来说，学会制作表格也是很重要的。因为与销量有关的数据都是很多并且很复杂的，而且不是简单的记在文档当中，就可以说明问题的。为了能够让更多的销售人员熟练运用Excel来制作表格，小编接下来要介绍的就是有关于销量预测的表格制作问题，有需要的朋友不要错过哦！1，打开【销量预测及目标制定】，xlsm，来分析每个表格所存放的数据。2，新建【空白工作表】，选择【单元格】，输入【标签信息】。向下【拖拽】，【填充】月份。输入【其它】数据，点击【

如何防止Excel删除前导零 Feb 29, 2024 am 10:00 AM

自动从Excel工作簿中删除前导零是否令人沮丧？当您在单元格中输入数字时，Excel通常会删除数字前面的前导零。默认情况下，它将缺少显式格式的单元格条目视为数值。前导零在数字格式中通常被认为是无关紧要的，因此被省略。此外，前导零可能会在某些数值运算中造成问题。因此，零被自动删除。本文将教你如何在Excel中保留前导零，以确保输入的帐号、邮政编码、电话号码等数字数据格式正确。在Excel中，如何允许数字前面有零？您可以在Excel工作簿中保留数字的前导零，有多种方法可供选择。您可以通过设置单元格格

你知道Word表格怎么求和吗 Mar 21, 2024 pm 01:10 PM

有时候，我们在Word表格中会经常遇到计数的问题；一般遇到这样的问题，大部分同学都回把Word表格复制到Excel中来计算；还有一部分同学会默默地拿起计算器去算。那有没有快速的方法来计算呢？当然有啊，其实在Word中也是可以计算求和的。那么，你知道该怎么操作吗？今天，我们就来一起来看一下吧！废话不多说，有需要的小伙伴赶紧收藏起来吧！步骤详情：1、首先，我们打开电脑上的Word软件，打开需要处理的文档。（如图所示）2、接着，我们将光标定位在求和数值所在的单元格上（如图所示）；然后，我们点击【菜单栏

word怎么把表格横竖调换 Mar 20, 2024 am 09:31 AM

Word软件是我们必不可少并需要经常使用的，前面学习了Word软件编辑表格，但是，如果不小心，将表格的横竖方向编辑反了，又不想浪费时间重新制作，是否可以将表格的横竖调换呢？答案当然是肯定，接下来，就由小编为大家详细的介绍word怎么把表格横竖调换的操作方法，，让我们一起来学习吧。首先，我们需要将下面的Word表格进行行列互换。要做到这一点，我们需要先全部选中表格，然后右键点击并选择复制功能。第2步，选择复制以后我们把word最小化，然后打开一个Excel表格，点击右键，选择粘贴，把它粘贴到Exc

WPS一个单元格分成两个 Mar 20, 2024 pm 06:00 PM

WPS软件作为文字，文档处理必不可少的帮手，在实际应用操作中，经常需要在单元格里进行操作，处理文字，文档，关于单元格的知识有很多。今天就让小编介绍一下关于WPS一个单元格怎么分成两个的具体操作步骤。1.首先我们打开需要编辑的WPS表格，选择需要将一个单元格分成两个的单元格文档。2.点击打开数据中的“分列”。3.然后在弹出来的窗口中选择“固定宽度”，点击“下一步”。4.在弹出来的窗口中点击需要分列的地方，回车确定。举一反三，此时如果需要改为3个，也可以将数字改为3。5.然后点击完成。6.还有一种方

新手制作表格有哪些技巧 Mar 21, 2024 am 09:11 AM

我们经常在excel中制作和编辑表格，但是作为一个刚刚接触软件的新手来讲，如何使用excel制作表格，并没有我们使用起来那么轻松。下边，我们针对新手，也就是初学者需要掌握的表格制作的一些步骤进行一些演练，希望对需要的人有些帮助。新手表格示例样板如下图：我们看看如何来完成！1，新建excel文档，有两种方法。可以在【桌面】空白位置，点击鼠标右键-【新建】-【xls】文件。也可以【开始】-【所有程序】-【MicrosoftOffice】-【MicrosoftExcel20**】2，双击我们新建的ex

See all articles

javascript合并表格单元格实例代码_javascript技巧

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题