最近自己封装了个JS脚本，用来创建和操作Table

Posted 2020-08-15 $("#阿飞")

基于JQuery封装的Table操作脚本

  1 /**
  2 依赖JQuery
  3 
  4 
  5 **/
  6 
  7 (function () {
  8     var Table = window.Table = function (rowCount, columnCount, width, height, rowHeight) {
  9         this.rowCount = rowCount;
 10         this.columnCount = columnCount;
 11         this.width = width;
 12         this.height = height;
 13         this.rowHeight = rowHeight;
 14         this.context;
 15         this.tableCss;
 16         this.rowCss;
 17         this.columnCss;
 18         this.onTdCreated = function () { };
 19         this.onTdMouseDown = function (e) { };
 20         this.onTrCreated = function () { };
 21         this.onTrMouseDown = function (e) { };
 22     };
 23     Table.prototype.CreateTable = function (target) {
 24         this.context = $("<table style=\'width:auto\'></table>");
 25 
 26         if (this.tableCss)
 27             this.context.addClass(this.tableCss);
 28         if (this.width)
 29             this.context.css("width", this.width);
 30         if (this.height)
 31             this.context.css("height", this.height);
 32 
 33         if (target) {
 34             this.context.appendTo(target);
 35         }
 36 
 37         for (var index = 0; index < this.rowCount; index++) {
 38             CreatedRow.call(this, this.context);
 39         }
 40 
 41         return this.context;
 42     };
 43     Table.prototype.GetRowCount = function () {
 44         return this.rowCount;
 45     };
 46     Table.prototype.GetColumnCount = function () {
 47         return this.columnCount;
 48     };
 49     Table.prototype.AddRow = function () {
 50         var tr = CreatedRow.call(this, this.context);
 51         if (this.rowHeight)
 52             tr.css("height", this.rowHeight);
 53 
 54         this.rowCount++;
 55         return tr;
 56     };
 57     Table.prototype.AddColumn = function () {
 58         var rows = $(this.context).children().children();
 59         for (var index = 0; index < rows.length; index++) {
 60             CreateTd.call(this, $(rows[index]));
 61         }
 62         this.columnCount++;
 63     };
 64     Table.prototype.RemoveRow = function (row) {
 65         $(row).remove();
 66         this.rowCount--;
 67         return $(row);
 68     }
 69     Table.prototype.RemoveColumn = function (column) {
 70         var tds = $(column).parent().children();
 71         var columnIndex = GetColumnIndex(tds, column);
 72         var rows = this.context.children().children()
 73         for (var index = 0; index < rows.length; index++) {
 74             var tr = rows[index];
 75             var tdIndex = GetTdIndex(tr, columnIndex);
 76             var td = $(tr).children()[tdIndex];
 77             if (parseInt($(td).attr("colspan") || 1) > 1) {
 78                 $(td).attr("colspan", parseInt($(td).attr("colspan") - 1));
 79             } else {
 80                 $(td).remove();
 81             }
 82         }
 83         this.columnCount--;
 84     }
 85     Table.prototype.MergeColumns = function (column, value) {
 86         value = parseInt(value);
 87         if (value <= 0) {
 88             throw "列数必须大于0！";
 89             return;
 90         }
 91 
 92         var tds = $(column).nextAll(\'td\');
 93         if (value > tds.length) value = tds.length;
 94         var colspan = parseInt($(column).attr("colspan") || 1);
 95 
 96         for (var index = 0; index < value; index++) {
 97             colspan += parseInt($(tds[index]).attr("colspan") || 1);
 98             $(tds[index]).remove();
 99         }
100 
101         $(column).attr("colspan", colspan);
102     }
103     Table.prototype.SplitColumn = function (column, value) {
104         value = parseInt(value);
105         if (value <= 0) {
106             throw "列数必须大于0！";
107             return;
108         }
109         var colspan = parseInt($(column).attr("colspan") || 1);
110 
111         if (colspan <= 1) {
112             throw "不能拆分单元格！";
113             return;
114         }
115 
116         if (value > colspan) {
117             throw "输入数字无效！";
118             return;
119         }
120 
121         $(column).attr("colspan", colspan - parseInt(value) + 1);
122         var tr = $(column).parent();
123         for (var index = 0; index < value - 1; index++) {
124             CreateTd.call(this,tr);
125         }
126     }
127     Table.prototype.AddRowFrom = function (row, position) {
128         var tr = CreatedRow();
129         for (var index = 0; index < this.columnCount; index++) {
130             CreateTd(tr);
131         }
132         switch (position) {
133             case "north":
134                 $(row).before(tr);
135                 break;
136             case "south":
137                 $(row).after(tr);
138                 break;
139             default:
140                 $(row).after(tr);
141                 break;
142         }
143         this.rowCount++;
144         return tr;
145     }
146     Table.prototype.AddColumnFrom = function (column, position) {
147         var columnIndex = GetColumnIndex($(column).parent().children(), column);
148         if (columnIndex < 0) {
149             throw "获取当前列失败！";
150             return;
151         }
152         var rows = this.context.children().children();
153         for (var index = 0; index < rows.length; index++) {
154             row = rows[index];
155             var td = CreateTd();
156             var tdIndex = GetTdIndex(row, columnIndex);
157             switch (position) {
158                 case "west":
159                     $($(row).children()[tdIndex]).before(td);
160                     break;
161                 case "east":
162                     $($(row).children()[tdIndex]).after(td);
163                     break;
164                 default:
165                     $($(row).children()[tdIndex]).after(td);
166                     break;
167             }
168         }
169         this.columnCount++;
170     }
171 
172     function CreatedRow(target) {
173         var tr;
174         if (this.rowCss)
175             tr = $("<tr class=\'" + this.rowCss + "\'></tr>");
176         else
177             tr = $("<tr></tr>");
178 
179         if (target) {
180             tr.appendTo(target);
181         }
182 
183         for (var index = 0; index < this.columnCount; index++) {
184             CreateTd.call(this, tr);
185         }
186 
187         if ($.isFunction(this.onTrMouseDown))
188             tr.bind("mousedown ", this.onTrMouseDown);
189 
190         if ($.isFunction(this.onTrCreated))
191             this.onTrCreated.call(tr);
192 
193         return tr;
194     };
195 
196     function CreateTd(target) {
197         var td;
198         if (this.columnCss)
199             td = $("<td class=\'" + this.columnCss + "\'></td>");
200         else
201             td = $("<td></td>");
202 
203         if (target) {
204             td.appendTo(target);
205         }
206 
207         if ($.isFunction(this.onTdMouseDown))
208             td.bind("mousedown ", this.onTdMouseDown);
209 
210         if ($.isFunction(this.onTdCreated))
211             this.onTdCreated.call(td);
212 
213         return td;
214     }
215 
216     function GetColumnIndex(tds, td) {
217         var tdIndex = $.inArray(td, tds);
218         var columnIndex = 0;
219         for (var index = 0; index <= tdIndex; index++) {
220             columnIndex += parseInt($(tds[index]).attr("colspan") || 1);
221         }
222         return columnIndex;
223     }
224 
225     function GetTdIndex(tr, columnIndex) {
226         var tds = $(tr).children();
227         var ColumnIndex = 0;
228         for (var index = 0; index < tds.length; index++) {
229             ColumnIndex += parseInt($(tds[index]).attr("colspan") || 1);
230             if (ColumnIndex >= columnIndex)
231                 return index;
232         }
233     }
234 }());

View Code