jQuery合併表格的自制簡易外掛
阿新 • • 發佈：2019-01-08
一、外掛程式碼
;(function($){ //合併行 $.fn.mergeRow = function(x,y,z){ _mergeRowOrCol.call(this,x,y,z,z); }; //合併列 $.fn.mergeCol = function(x,y,z){ _mergeRowOrCol.call(this,z,z,x,y); } /** * 目前只支援跨行或跨列，不支援跨行又跨列 * x:行的開始 * y:行的結尾 * z:列的開始 * j:列的結尾 */ var _mergeRowOrCol = function(x,y,z,j){ var index = 0,temp = null,isrow =x!==y?true:false; this.each(function(){ $(this).find("tr:gt("+(x-1)+")").filter("tr:lt("+(y-x+1)+")").each(function(i,dom){ if(isrow){ $(this).find('td:eq('+z+')').each(function(){ //遍歷td if(temp==null){ temp = this; $(temp).attr("rowSpan",y-x+1); }else{ $(this).hide(); } }); }else{ $(this).find("td:eq("+z+")").attr("colSpan",(j-z)+1) $(this).find("td:gt("+z+")").filter("td:lt("+(j-z)+")").hide(); return false; } }); }); }; })(jQuery);
二、使用方法
$(function(){
$(".test").mergeCol(1,2,1);
$(".test").mergeRow(2,4,3);
});三、效果
四、完整demo
<!DOCTYPE html> <html lang="en"><head><title></title> <script type="text/javascript" src="../jquery-1.11.2.min.js"></script> </head> <style> table{border-collapse:collapse;padding:5px;text-align:center;width:500px;margin:50px auto;} td{border: 1px solid #ccc;} </style> <body> <script> ;(function($){ //合併行 $.fn.mergeRow = function(x,y,z){ _mergeRowOrCol.call(this,x,y,z,z); }; //合併列 $.fn.mergeCol = function(x,y,z){ _mergeRowOrCol.call(this,z,z,x,y); } /** * 目前只支援跨行或跨列，不支援跨行又跨列 * x:行的開始 * y:行的結尾 * z:列的開始 * j:列的結尾 */ var _mergeRowOrCol = function(x,y,z,j){ var index = 0,temp = null,isrow =x!==y?true:false; this.each(function(){ $(this).find("tr:gt("+(x-1)+")").filter("tr:lt("+(y-x+1)+")").each(function(i,dom){ if(isrow){ $(this).find('td:eq('+z+')').each(function(){ //遍歷td if(temp==null){ temp = this; $(temp).attr("rowSpan",y-x+1); }else{ $(this).hide(); } }); }else{ $(this).find("td:eq("+z+")").attr("colSpan",(j-z)+1) $(this).find("td:gt("+z+")").filter("td:lt("+(j-z)+")").hide(); return false; } }); }); }; })(jQuery); $(function(){ $(".test").mergeCol(1,2,1); $(".test").mergeRow(2,4,3); }); </script> <table class="test"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> </table> </body> </html>