Home > Article > Web Front-end > Code to implement merged cells with the same content based on JQuery

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

ringa_leeOriginal: 2018-05-11 15:40:331266browse

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>

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>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：myFocus slide3D v1.1.0 usage and download_javascript skillsNext article：myFocus slide3D v1.1.0 usage and download_javascript skills

See more

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

Related articles