table表格合併第一列中相同的內容（優化+註解）
阿新 • • 發佈：2019-01-05
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #table1{border-collapse: collapse;} #table1 td{border: 1px solid #000;width: 50px;text-align: center;} </style> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <script> console.log($("td").attr("rowSpan"));//所有td的rowSpan屬性的預設值都為undefined jQuery.fn.rowspan = function(colIdx) { //封裝的一個JQuery小外掛 console.log(this); return this.each(function(){ console.log(this) var that;//用來儲存含 有重複內容的列中的第一個td console.log(that);//undefined var r = 1; $('tr').each(function() { //外層迴圈控制行 $('td:eq('+colIdx+')', this).each(function() { //內層迴圈控制列 //第一次遇到if條件時 this為 #td01 顯然 undefined == “333” 結果為 false 進入else語句，把閉包中宣告的變數that設定為#td01，從此以後that的值恆為#td01 //第二次遇到if條件時 this為 #td02 顯然 $(“#td01”).html() == $(“#td02”).html() 結果為 true 進入if語句，把#td01的rowSpan設定為2，並隱藏#td02 //第三次遇到if條件時 this為 #td03 顯然 $(“#td01”).html() == $(“#td03”).html() 結果為 true 進入if語句，把#td01的rowSpan設定為3，並隱藏#td03 // 過程：先執行1次else語句，再執行2次if語句 if ($(that).html() == $(this).html()) { r++;//遍歷#td02,#td03，當遇到1個內容相等的td，rowspan=2;當遇到第2個內容相等的td，rowspan=3;...... $(that).attr("rowSpan",r);//r自增1 然後賦值給#td01的rowSpan屬性 console.log(that);//#td01 $(this).hide(); //分別隱藏#td02,#td03 console.log(this);// #td02,#td03 } else { that = this;//#td01（#td02,#td03進不來） } }); }); }); } //呼叫jq裡面自定義的方法rowspan(colIdx) $(document).on("DOMContentLoaded",function () { $("#table1").rowspan(0);//傳入的引數是對應的列數從0開始 第一列合併相同 // $("#table1").rowspan(2);//傳入的引數是對應的列數從0開始 第三列合併相同 }) </script> </head> <body> <table id="table1"> <tr id="tr01"> <td>111</td> <td>222</td> <td id="td01">333</td> <td></td> </tr> <tr> <td>111</td> <td>555</td> <td id="td02">333</td> <td></td> </tr> <tr> <td>111</td> <td>888</td> <td id="td03">333</td> <td></td> </tr> </table> </html>
註解：
1、jQuery.fn是jQuery.prototype的簡寫，jq底層jQuery.fn = jQuery.prototype，即向jQuery物件的原型裡面新增方法。通過jQuery()或者$()新建的jq物件會自動繼承jQuery.prototype裡面的方法；
2、新新增的方法名為 rowspan(colIdx);一勞永逸！ 新增一次，後面可以直接呼叫rowspan()方法，如$("#table1").rowspan(0);
3、整體結構f1>f2>f3>f4,4層函式巢狀，形成3個閉包，即閉包f2，f3，f4
閉包f2內部儲存的私有變數：colIdx
閉包f3內部儲存的私有變數：that 和 r
閉包f4內部儲存的私有變數：this (這裡的this指向當前td的執行環境context,即當前td所在的tr,而f4內部的this指向#td01,#td02,#td03，即重複列當中的每一個td)
4、this的指向：
函式f1內部的this指向：即將呼叫rowspan()方法的物件，如$("#table1").rowspan(0);this指向$("#table1")物件
函式f2內部的this指向：undified
函式f3內部的this指向：tr
函式f4內部的this指向：#td01,#td02,#td03，即重複列當中的每一個td
每句程式碼的註釋見上面的程式碼。
效果圖：
