87,902
社区成员
发帖
与我相关
我的任务
分享如何用Javascript合并单元格
表格挺复杂的，我想把第七列中相邻行的内容相同的单元格合并一下。在网上找了段代码，自己改了半天，老是把我原先的表格结构给弄混乱了。求个合并的方法。
虽然不好意思，但是还是要说，这个我想要段能用的代码。。。
虽然不好意思，但是还是要说，这个我想要段能用的代码。。。
...全文
请发表友善的回复…
发表回复
kslion 2010-09-08
- 打赏
- 举报
不规则表格也没关系的哇，我那只是个思路，你可以实际情况改下哇，一个保存，一个比较。
aahujunaa 2010-09-07
- 打赏
- 举报
<td colspan="合并的列数"></td>
<td rowspan="合并的行数"></td>
<td rowspan="合并的行数"></td>
hywink 2010-09-07
- 打赏
- 举报
[Quote=引用 7 楼 kslion 的回复:]
看需求，也就是入参是表格id和合并列哇，只有两个参数。不知下面例子满足需求不？
HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
<table width="500" border="1" cellspacing="0" c……
[/Quote]
你这只对规整的表格有效。
看需求，也就是入参是表格id和合并列哇，只有两个参数。不知下面例子满足需求不？
HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
<table width="500" border="1" cellspacing="0" c……
[/Quote]
你这只对规整的表格有效。
hywink 2010-09-07
- 打赏
- 举报
[Quote=引用 3 楼 ibm_hoojo 的回复:]
HTML code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>合并</title>
<script type="text/javascript" src="jquery.js"></script>
<script type=……
[/Quote]
jquery写的啊，公司一直没用jquery呢。。。
HTML code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>合并</title>
<script type="text/javascript" src="jquery.js"></script>
<script type=……
[/Quote]
jquery写的啊，公司一直没用jquery呢。。。
hywink 2010-09-07
- 打赏
- 举报
<table width="600" border="1">
<tr>
<td>序号</td>
<td>列1</td>
<td>列2</td>
</tr>
<tr>
<td rowspan="6">1</td>
<td rowspan="6"> </td>
<td>1</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td rowspan="4">3</td>
<td rowspan="4"> </td>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td rowspan="9"> </td>
<td rowspan="6"> </td>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>我的表格大约是这个样子的，前几列有合并单元格。楼上给出的貌似都只对规整的表格起作用。
我想要的是把列2里面相同内容的合并一下。另外，还有一个就是，序号一对应的最后一行如果和序号2对应的第一行一样的话是不需要合并的。我整这东西整一下午了。
kslion 2010-09-07
- 打赏
- 举报
看需求，也就是入参是表格id和合并列哇，只有两个参数。不知下面例子满足需求不？
楼主用jQuery的话，可以用jQuery精简下。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
<table width="500" border="1" cellspacing="0" cellpadding="0" id="tbl">
<tr>
<td> </td>
<td> </td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
<script type="text/javascript">
function combineTd(id, colNo) {
var tbl = document.getElementById(id);
var vList = [];
var rows = tbl.rows;
for(var i=0; i<rows.length; i++) {
vList.push(rows[i].cells[colNo-1].innerHTML);
}
for(var i=0; i<vList.length-1; i++) {
var cn = 1;
for(var j=i+1; j<vList.length; j++) {
if(vList[i] == vList[j]){
rows[j].removeChild(rows[j].cells[colNo-1]);
cn++;
}
else {
if(cn != 1) {
rows[i].cells[colNo-1].setAttribute("rowspan", cn);
}
i = j;
cn = 1;
}
}
}
}
window.onload = function() {
combineTd("tbl", 4);
}
</script>
</html>
楼主用jQuery的话，可以用jQuery精简下。
funfun5433 2010-09-07
- 打赏
- 举报
<html>
<head>
<script type="text/javascript">
function funfun(row,cell,num)
{
alert("111");
var mytable=document.getElementById('tb');
for(var i= (row+1),j=0;j<(num-1);j++){
mytable.rows[i].removeChild(mytable.rows[i].cells[cell]);
}
mytable.rows[row].cells[cell].setAttribute("rowspan",num);
}
</script>
</head>
<body>
<table id="tb">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
<td>35</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
<td>45</td>
</tr>
<tr>
<td>51</td>
<td>52</td>
<td>53</td>
<td>54</td>
<td>55</td>
</tr>
</table>
<input type="button" id="btn" value="button" onclick="javascript:funfun(2,2,2);">
</body>
</html>
详情：http://hi.baidu.com/xwx520/blog/item/a09b58460009910f6b63e50a.html
kslion 2010-09-07
- 打赏
- 举报
饿，明白了，你说的是合并列中的行。
kslion 2010-09-07
- 打赏
- 举报
你的表格是规律的么，两列合并后只剩下一列？还有原来的列头你想怎么处理？
hoojo 2010-09-07
- 打赏
- 举报
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>合并</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$("input").click(function () {
merge(3, 2, 2);//参数1合并第3列，参数2从2行开始合并，参数3合并2行(跨行)
});
});
function merge(cols, startRowIndex, num) {
var result = 0;
var tr = $("#tab tr:gt(" + startRowIndex + ")");
tr.each(function (i) {//tab是table id
var td = $(this).find("td:eq(" + (cols - 1) + ")");
result += eval(td.text()) || 0;
if (i != 0) {
td.remove();
} else {
td.attr("rowspan", num || tr.size());
}
});
}
</script>
</head>
<body>
<input type="button" value="合并" />
<table width="500" border="1" cellspacing="0" cellpadding="0" id="tab">
<tr>
<td> </td>
<td> </td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>
hywink 2010-09-07
- 打赏
- 举报
[Quote=引用 1 楼 aahujunaa 的回复:]
<td colspan="合并的列数"></td>
<td rowspan="合并的行数"></td>
[/Quote]
……
用Javascript合并。。。
<td colspan="合并的列数"></td>
<td rowspan="合并的行数"></td>
[/Quote]
……
用Javascript合并。。。
