Code to implement merged cells with the same content based on JQuery-JS Tutorial-php.cn

Code to implement merged cells with the same content based on JQuery

ringa_lee

Release： 2018-05-11 15:40:33

Original

1353 people have browsed it

When developing web front-end, we often encounter pages that need to be formed or some tables. For example, the same content needs to be displayed in the same cell. The general method is to nest tables within tables, but this method will increase the number of pages. The burden affects the page loading speed. But what should I do if it is difficult to control the number of css styles written using DIV? We will use JQuery to combine cells with the same content in a table. Here is the code to share with you. I hope it will be useful to everyone, as follows:
Header JQuery code

Copy Code The code is as follows:

<script type="text/javascript"> 
jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件 
return this.each(function(){ 
var that; 
$(&#39;tr&#39;, this).each(function(row) { 
$(&#39;td:eq(&#39;+colIdx+&#39;)&#39;, this).filter(&#39;:visible&#39;).each(function(col) { 
if (that!=null && $(this).html() == $(that).html()) { 
rowspan = $(that).attr("rowSpan"); 
if (rowspan == undefined) { 
$(that).attr("rowSpan",1); 
rowspan = $(that).attr("rowSpan"); } 
rowspan = Number(rowspan)+1; 
$(that).attr("rowSpan",rowspan); 
$(this).hide(); 
} else { 
that = this; 
} 
}); 
}); 
}); 
} 
$(function() { 
$(“#table1″).rowspan(0);//传入的参数是对应的列数从0开始，哪一列有相同的内容就输入对应的列数值 
$(“#table1″).rowspan(2); 
}); 
</script>

Copy after login

Add a table in the body

Copy the code The code is as follows:

<body> 
<table id="table1" border="1" cellpadding="5" cellspacing="0" width="300px"> 
<tr> 
<td>1</td> 
<td>2</td> 
<td>3</td> 
<td>4</td> 
</tr> 
 
<tr> 
<td>1</td> 
<td>f</td> 
<td>3</td> 
<td>s</td> 
</tr> 
</table> 
</body>

Copy after login