table根据第一列将同名行合并(合并行)

最新推荐文章于 2023-10-12 10:44:36 发布

skycb

最新推荐文章于 2023-10-12 10:44:36 发布

阅读量1.3k

点赞数 2

分类专栏： web方面文章标签： html

本文链接：https://blog.csdn.net/lyy857872800/article/details/84911992

版权

web方面专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
	$(function(){
		var $table=$(".abc");
		var tagStr="";
		var name="";
		$table.find("tr:gt(0)").each(function(i){
   			var $tr=$(this);
			var $td=$tr.children("td:eq(0)");
			var tdname=$td.text();
			if(name==tdname){
				//表示相同名字
				$td.remove();
			}else{
				//
				tagStr=tagStr+(i+1)+",";
			}
			name=tdname;
 		});
		//对标记字符串进行分割	
		var strs= new Array();
		strs=tagStr.substring(0,tagStr.length-1).split(",");
		var count=$table.find("tr:gt(0)").length+1;
		for(i=0;i<strs.length;i++){
		    var s="tr:eq("+strs[i]+")"
			if(i<strs.length-1){
				//得到要合并的行数
				$table.find(s).children("td:eq(0)").attr("rowspan",(strs[i+1]-strs[i]));	
			}else{
				$table.find(s).children("td:eq(0)").attr("rowspan",(count-strs[i]));
			}
		}
	})

</script>
</head>

<body>
	<form action="" method="get">
    <table class="abc" width="676" border="1" align="center">
  <tr>
    <th width="191">姓名</td>
    <th width="235">性别</td>
    <th width="228">爱好</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>男</td>
    <td>看电影</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>男</td>
    <td>打游戏</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>女</td>
    <td>游泳</td>
  </tr>
  <tr>
    <td>蔡柳</td>
    <td>男</td>
    <td>玩牌</td>
  </tr>
  <tr>
    <td>蔡柳</td>
    <td>男</td>
    <td>AAA</td>
  </tr>
  <tr>
    <td>蔡柳</td>
    <td>男</td>
    <td>BBB</td>
  </tr>
  <tr>
    <td>XXX</td>
    <td>男</td>
    <td>RRR</td>
  </tr>
  <tr>
    <td>XXX</td>
    <td>男</td>
    <td>TTT</td>
  </tr>
  <tr>
    <td>XXX</td>
    <td>男</td>
    <td>YYY</td>
  </tr>
  <tr>
    <td>XXX</td>
    <td>男</td>
    <td>UUU</td>
  </tr>
  <tr>
    <td>XXX</td>
    <td>男</td>
    <td>OOO</td>
  </tr>
</table>

    </form>
</body>
</html>

附件为合并指定列方法文件

skycb

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
table根据第一列将同名行合并(合并行)

[code="java"]无标题文档 $(function(){ var $table=$(".abc"); var tagStr=""; var name=""; $table.find("tr:gt(0)").each(function(i){ var $tr=$(this); var $td=$tr.children(...
复制链接

扫一扫

专栏目录