auto merge html cells with same text
by shed
HTML
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<table id='theTable' border="1">
<tr>
<td>First</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td>First</td>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>Second</td>
<td>V</td>
<td>S</td>
</tr>
<tr>
<td>Third</td>
<td>D</td>
<td>H</td>
</tr>
<tr>
<td>Third</td>
<td>E</td>
<td>E</td>
</tr>
</table>
<table id="table1" border="1" cellspacing="0" style="margin-top:20px">
<thead>
<tr>
<th>State</th>
<th>City</th>
<th>Street</th>
</tr>
</thead>
<tbody>
<tr>
<td>VT</td>
<td>Burlington</td>
<td>Elm</td>
</tr>
<tr>
<td>NY</td>
<td>Manhattan</td>
<td>Main</td>
</tr>
<tr>
<td>NY</td>
<td>Manhattan</td>
<td>Oak</td>
</tr>
<tr>
<td>NY</td>
<td>Albany</td>
<td>State</td>
</tr>
</tbody>
</table>
JavaScript
/*
* merge horizontally
* ex) autoMergeByCol('theTable', 2, 0, 0);
*/
function autoMergeByCol(tableId
, rowStartIndex // zero or positive
, colStart // zero or positive
, colEnd // equals to colStart or greater than colStart or negative to go to the end of cols
) {
/*
console.log('autoMergeByCol tableId=' + tableId
+ ', rowStartIndex=' + rowStartIndex
+ ', colStart=' + colStart
+ ', colEnd=' + colEnd
);
*/
var trArr = $('#' + tableId).find('tr'); // rows array
for(var rowIndex = rowStartIndex ; rowIndex < trArr.length ; rowIndex++) {
var tdArr = $(trArr[rowIndex]).find('td'); // cols array of the row
if(colEnd < 0) colEnd = tdArr.length - 1; // if colEnd is negative, process at the end of the cols;
for(var colIndex = colStart ; colIndex < tdArr.length && colIndex <= colEnd ; colIndex++) {
var span = 1;
var theCell = $(tdArr)[colIndex];
if($(theCell).attr('rowspan')) {continue;}
var cellNext = $($(theCell).parent().children()[colIndex + span]);
while(cellNext != undefined
&& $(theCell).text() == $(cellNext).text()
&& colIndex + span <= colEnd ) {
span++;
cellNext.hide();
cellNext = $($(cellNext).parent().children()[colIndex + span]);
}
if(span > 1) $(theCell).attr('colspan', span);
}
}
}
/*
* merge vertically
* 한 column의 row들 비교
* tableId : 테이블 id
* rowStartIndex : 병합을 시작할 row index
* colStart : 병합을 시작할 column index
* colEnd: 병합을 종료할 column index
* ex) autoMergeByCol('theTable', 2, 0, 0);
*/
function autoMergeByRow(tableId
, rowStartIndex // zero or positive
, colStart // zero or positive
, colEnd // equals to colStart or greater than colStart or negative
) {
/*
console.log('autoMergeByRow tableId=' + tableId
+ ', rowStartIndex=' + rowStartIndex
+ ', colStart=' + colStart
+ ', colEnd=' + colEnd
);
*/
var trArr = $('#' + tableId).find('tr'); // rows array
for(var rowIndex = rowStartIndex ; rowIndex <...