合并表格中相同单元格的 jQuery 插件可以帮助简化代码,并提高开发效率,以下是一个精简版的 jQuery 插件示例,用于合并表格中相同的单元格:
(function($) { $.fn.mergeCells = function(options) { var settings = $.extend({ colIndex: 0, // 要合并的列索引 compareFn: null // 自定义比较函数 }, options); return this.each(function() { var table = $(this); var rows = table.find('tr'); var lastValue = null; var rowspanCount = 1; rows.each(function(index) { var cell = $(this).find('td').eq(settings.colIndex); var currentValue = cell.text(); if (index === 0) { lastValue = currentValue; return; } if (settings.compareFn) { if (settings.compareFn(currentValue, lastValue)) { rowspanCount++; cell.remove(); } else { $(rows[index rowspanCount]).find('td').eq(settings.colIndex).attr('rowspan', rowspanCount); lastValue = currentValue; rowspanCount = 1; } } else { if (currentValue === lastValue) { rowspanCount++; cell.remove(); } else { $(rows[index rowspanCount]).find('td').eq(settings.colIndex).attr('rowspan', rowspanCount); lastValue = currentValue; rowspanCount = 1; } } }); // 处理最后一行 if (rowspanCount > 1) { $(rows[rows.length 1]).find('td').eq(settings.colIndex).attr('rowspan', rowspanCount); } }); }; }(jQuery));
使用方法
假设你有一个 HTML 表格如下:
<table id="myTable"> <tr> <td>A</td> <td>1</td> </tr> <tr> <td>A</td> <td>2</td> </tr> <tr> <td>B</td> <td>3</td> </tr> <tr> <td>B</td> <td>4</td> </tr> </table>
你可以使用这个插件来合并第一列中的相同单元格:
$('#myTable').mergeCells({ colIndex: 0 });
自定义比较函数
如果你需要自定义比较逻辑,可以传递一个compareFn
函数,忽略大小写进行比较:
$('#myTable').mergeCells({ colIndex: 0, compareFn: function(a, b) { return a.toLowerCase() === b.toLowerCase(); } });
这个插件非常简洁,但功能足够强大,可以根据需要进行扩展和定制。