JSFiddle - React, Tailwind, and code Playground
by igos
HTML
<table id="PRODUCTION_UNIT_DATA" style="width:70%;text-align:center;">
<thead>
<tr><th colspan="2" rowspan="2">PRODUCTION_UNIT_DATA</th><th colspan="12">2013</th><th rowspan="2">SUM</th></tr>
<tr>
<th>Styczeń</th>
<th>Luty</th>
<th>Marzec</th>
<th>Kwiecień</th>
<th>Maj</th>
<th>Czerwiec</th>
<th>Lipiec</th>
<th>Sierpień</th>
<th>Wrzesień</th>
<th>Październik</th>
<th>Listopad</th>
<th>Grudzień</th>
</tr>
</thead>
<tbody>
<tr>
<th>ELECTRICITY_PRODUCTION</th>
<th>PLAN</th>
<td> <input type="text" id="valueMap[-1][11].values[0].value" name="valueMap[-1][11].values[0].value" value="" class='LISTAATR rowSum_11 rowSum ' onChange='reSum(11)' maxlength='' style='width: 60px;' >
</td>
<td> <input type="text" id="valueMap[-1][11].values[1].value" name="valueMap[-1][11].values[1].value" value="" class='LISTAATR rowSum_11 rowSum ' onChange='reSum(11)' maxlength='' style='width: 60px;' >
</td>
<td> <input type="text" id="valueMap[-1][11].values[2].value" name="valueMap[-1][11].values[2].value" value="" class='LISTAATR rowSum_11 rowSum ' onChange='reSum(11)' maxlength='' style='width: 60px;' >
</td>
<td> <input type="text" id="valueMap[-1][11].values[3].value" name="valueMap[-1][11].values[3].value" value="" class='LISTAATR rowSum_11 rowSum ' onChange='reSum(11)' maxlength='' style='width: 60px;' >
</td>
<td> <input type="text" id="valueMap[-1][11].values[4].value" name="valueMap[-1][11].values[4].value" value="" class='LISTAATR rowSum_11 rowSum ' onChange='reSum(11)' maxlength='' style='width: 60px;' >
</td>
<td> <input type="text" id="valueMap[-1][11].values[5].value" name="valueMap[-1][11].values[5].value" value="" class='LISTAATR rowSum_11 rowSum ' onChange='reSum(11)' maxlength='' style='width: 60px;' >
</td>
<td> <input type="text" id="valueMap[-1][11].values[6].value"...JavaScript
function reSum(rowNum) {
}
var prevColumn = undefined;
$("#PRODUCTION_UNIT_DATA").find('tbody').find("tr").each(function(index, value) {
var thisColumn = $(this).find("th:nth-child(2)");
if(prevColumn != undefined) {
if(prevColumn.text() == thisColumn.text()) {
var html = '';
html += '<tr><th rowspan="3">'+prevColumn.parent().find('td:last').text()+'</th><th>SUM</th>';
for(var i=0;i < 12;i++) {
html += '<td><input type="text" /></td>';
}
html += '<td><input type="text" /></td>';
html += '</tr>';
thisColumn.parent().find('th:first').remove();
prevColumn.parent().find('th:first').remove();
prevColumn.parent().before(html);
}
}
prevColumn = thisColumn;
});