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;
$('tr', this).each(function(row) {
$('td:eq('+colIdx+')', this).filter(':visible').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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
