Web front-end development often encounter the page to make a form or do some table effect as the same content to the same cell inside the display, The general method is the table inside the set table but this method will increase the burden of the page impact page load speed But if the use of Div has bad control to write a lot of CSS style, then how to do? We will use jquery to the same content in his table cell, where the code to share with you, hope to be useful for everyone, as follows:
Head jquery Code
Copy Code code as follows:
<script type= "Text/javascript" >
JQuery.fn.rowspan = function (COLIDX) {//encapsulated a jquery widget
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's = this;
}
});
});
});
}
$ (function () {
$ ("#table1 ″). rowspan (0);//incoming parameter is the corresponding number of columns starting from 0, which column has the same content to enter the corresponding column values
$ ("#table1 ″). rowspan (2);
});
</script>
Add a form inside the body
Copy Code code 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>
IE effect
Firefox effect
More front-end development can focus on the UI front-end
