I have table with some data in an array to be displayed as below. In this example, I display 2 table datas but it can be more than 2. I have to calculate the column population, collection 1 and collection 2 of each table and show then at the end of each table.
So far I have tried following code to calculate where I first calcuate the number of tables available by counting array.
<script type="text/javascript">
var count = <?php echo json_encode(count($lists)); ?>;
var total = 0;
for(var i = 1; i <= count; i++)
{
var available = $(".used-community .plant_counter_"+i);
$.each(available, function(key, value)
{
total+=parseInt(available[key].innerText);
});
console.log(total);//edit variable name - totala changed to total
}
</script>
<table class="table" border="1">
<thead>
<tr class="titlerow">
<th>Name</th>
<th>Address</th>
<th>Population</th>
<th>Collection 1</th>
<th>collection 2</th>
</tr>
</thead>
<tbody class="used-community">
<tr id="47" class="rowList middle">
<td>Wangkha</td>
<td>Soi Wangkha 3</td>
<td class="plant_counter_1">100000</td>
<td>31</td>
<td>11315</td>
</tr>
<tr id="43" class="rowList middle">
<td>one</td>
<td>one address</td>
<td class="plant_counter_1">35000</td>
<td>7</td>
<td>2555</td>
</tr>
<tr id="46" class="rowList middle">
<td>Bang</td>
<td>Bang khuwang Rd</td>
<td class="plant_counter_1">6000</td>
<td>2</td>
<td>730</td>
</tr>
<tr bgcolor="#66CCFF">
<td></td>
<td></td>
<td></td>
<td class="col"></td>
<td class="cap"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table class="table" border="1">
<thead>
<tr class="titlerow">
<th>Name</th>
<th>Address</th>
<th>Population</th>
<th>Collection 1</th>
<th>collection 2</th>
</tr>
</thead>
<tbody class="used-community">
<tr id="45" class="rowList middle">
<td>sap</td>
<td>sap thawi</td>
<td class="plant_counter_2">80000</td>
<td>15</td>
<td>5475</td>
</tr>
<tr id="44" class="rowList middle">
<td>two-nonthaburi</td>
<td>nonthaburi</td>
<td class="plant_counter_2">69000</td>
<td>11</td>
<td>4015</td>
</tr>
<tr bgcolor="#66CCFF">
<td></td>
<td></td>
<td></td>
<td class="col"></td>
<td class="cap"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
My code is calculating the row with class "plant_counter_1" correctly but for next table it continue adding the sum of table 1 as well. Can anybody teach me where I did mistake and I how can I find out the sum of other two columns
Thank You
Loop over each table and work within that table instance. The total data count is not really needed since it doesn't break down the number of tables.
Since you can easily isolate table instances I would suggest you use common class names across all tables and don't use incremental ones
$('table').each(function(){
var $table =$(this),
$rows = $table.find('tbody tr'),
$lastRowCells = $rows.last().children(),
collectionTotals = $rows.not(':last').map(function(){
var $cells = $(this).children()
return [[+$cells[3].textContent, +$cells[4].textContent]]
}).get()
.reduce(function(a,c){
$.each(c,function(i, val){
a[i] += val;
});
return a;
},[0,0]);
$lastRowCells.eq(3).text(collectionTotals[0]);
$lastRowCells.eq(4).text(collectionTotals[1]);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" border="1">
<thead>
<tr class="titlerow">
<th>Name</th>
<th>Address</th>
<th>Population</th>
<th>Collection 1</th>
<th>collection 2</th>
</tr>
</thead>
<tbody class="used-community">
<tr id="47" class="rowList middle">
<td>Wangkha</td>
<td>Soi Wangkha 3</td>
<td class="plant_counter">100000</td>
<td>31</td>
<td>11315</td>
</tr>
<tr id="43" class="rowList middle">
<td>one</td>
<td>one address</td>
<td class="plant_counter">35000</td>
<td>7</td>
<td>2555</td>
</tr>
<tr id="46" class="rowList middle">
<td>Bang</td>
<td>Bang khuwang Rd</td>
<td class="plant_counter">6000</td>
<td>2</td>
<td>730</td>
</tr>
<tr bgcolor="#66CCFF">
<td></td>
<td></td>
<td></td>
<td class="col"></td>
<td class="cap"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table class="table" border="1">
<thead>
<tr class="titlerow">
<th>Name</th>
<th>Address</th>
<th>Population</th>
<th>Collection 1</th>
<th>collection 2</th>
</tr>
</thead>
<tbody class="used-community">
<tr id="45" class="rowList middle">
<td>sap</td>
<td>sap thawi</td>
<td class="plant_counter">80000</td>
<td>15</td>
<td>5475</td>
</tr>
<tr id="44" class="rowList middle">
<td>two-nonthaburi</td>
<td>nonthaburi</td>
<td class="plant_counter">69000</td>
<td>11</td>
<td>4015</td>
</tr>
<tr bgcolor="#66CCFF">
<td></td>
<td></td>
<td></td>
<td class="col"></td>
<td class="cap"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Just a small modification to your code and it will work. Since you need multiple results, your total needs to be an array. Please run attached code snippet for clarity.
var count =2;//change back to your php <?php echo json_encode(count($lists)); ?>;
var total = new Array();
total.push(0);
for(var i = 1; i <= count; i++)
{
total.push(0);
var available = $(".used-community .plant_counter_"+i);
$.each(available, function(key, value)
{
total[i]+=parseInt(available[key].innerText);
});
total.push(0);
console.log(total[i]);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" border="1">
<thead>
<tr class="titlerow">
<th>Name</th>
<th>Address</th>
<th>Population</th>
<th>Collection 1</th>
<th>collection 2</th>
</tr>
</thead>
<tbody class="used-community">
<tr id="47" class="rowList middle">
<td>Wangkha</td>
<td>Soi Wangkha 3</td>
<td class="plant_counter_1">100000</td>
<td>31</td>
<td>11315</td>
</tr>
<tr id="43" class="rowList middle">
<td>one</td>
<td>one address</td>
<td class="plant_counter_1">35000</td>
<td>7</td>
<td>2555</td>
</tr>
<tr id="46" class="rowList middle">
<td>Bang</td>
<td>Bang khuwang Rd</td>
<td class="plant_counter_1">6000</td>
<td>2</td>
<td>730</td>
</tr>
<tr bgcolor="#66CCFF">
<td></td>
<td></td>
<td></td>
<td class="col"></td>
<td class="cap"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table class="table" border="1">
<thead>
<tr class="titlerow">
<th>Name</th>
<th>Address</th>
<th>Population</th>
<th>Collection 1</th>
<th>collection 2</th>
</tr>
</thead>
<tbody class="used-community">
<tr id="45" class="rowList middle">
<td>sap</td>
<td>sap thawi</td>
<td class="plant_counter_2">80000</td>
<td>15</td>
<td>5475</td>
</tr>
<tr id="44" class="rowList middle">
<td>two-nonthaburi</td>
<td>nonthaburi</td>
<td class="plant_counter_2">69000</td>
<td>11</td>
<td>4015</td>
</tr>
<tr bgcolor="#66CCFF">
<td></td>
<td></td>
<td></td>
<td class="col"></td>
<td class="cap"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
to make things a little bit of fun
(I assumed the total rows have two extra misplaced columns)
;$(function() {
var tables = $('table > tbody');
var totals = new Array(tables.length);
tables.each(function(nt,t) {
var rows = $('tr',t);
var totalElement = rows.splice(-1);
rows = rows.map(function(nr, r) {
return [$('td',$(r)).slice(-3)
.map( function(nc,c) {
return parseInt($(c).text()) || 0; }).toArray()];
}).toArray();
totals[nt] = rows.reduce( function(a, b) {
return a.map(function(v,n) { return v + b[n]; });
}, [0,0,0] );
$('td',totalElement[0]).splice(-3).forEach(function(c,n) {
$(c).text(totals[nt][n]); });
});
console.log(totals);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" border="1">
<thead>
<tr class="titlerow">
<th>Name</th>
<th>Address</th>
<th>Population</th>
<th>Collection 1</th>
<th>collection 2</th>
</tr>
</thead>
<tbody class="used-community">
<tr id="47" class="rowList middle">
<td>Wangkha</td>
<td>Soi Wangkha 3</td>
<td class="plant_counter_1">100000</td>
<td>31</td>
<td>11315</td>
</tr>
<tr id="43" class="rowList middle">
<td>one</td>
<td>one address</td>
<td class="plant_counter_1">35000</td>
<td>7</td>
<td>2555</td>
</tr>
<tr id="46" class="rowList middle">
<td>Bang</td>
<td>Bang khuwang Rd</td>
<td class="plant_counter_1">6000</td>
<td>2</td>
<td>730</td>
</tr>
<tr bgcolor="#66CCFF">
<td></td>
<td></td>
<td></td>
<td class="col"></td>
<td class="cap"></td>
</tr>
</tbody>
</table>
<table class="table" border="1">
<thead>
<tr class="titlerow">
<th>Name</th>
<th>Address</th>
<th>Population</th>
<th>Collection 1</th>
<th>collection 2</th>
</tr>
</thead>
<tbody class="used-community">
<tr id="45" class="rowList middle">
<td>sap</td>
<td>sap thawi</td>
<td class="plant_counter_2">80000</td>
<td>15</td>
<td>5475</td>
</tr>
<tr id="44" class="rowList middle">
<td>two-nonthaburi</td>
<td>nonthaburi</td>
<td class="plant_counter_2">69000</td>
<td>11</td>
<td>4015</td>
</tr>
<tr bgcolor="#66CCFF">
<td></td>
<td></td>
<td></td>
<td class="col"></td>
<td class="cap"></td>
</tr>
</tbody>
</table>
Well if I understand you correctly. You can store the total sum of each table into array. I think the code explain alone... But I declare an array named
'total' outside of the for statement that contain the total of each table. When the foreach finish to sum all the values in tempTotal, then do a push to total array and save the operation of the first loop. and the second... third... etc
var total = [];
for(var i = 1; i <= 2; i++)
{
var tempTotal = 0;
var available = $(".used-community .plant_counter_"+i);
$.each(available, function(key, value)
{
tempTotal = tempTotal + parseInt(available[key].innerText);
});
total.push(tempTotal);
}
console.log(total);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" border="1">
<thead>
<tr class="titlerow">
<th>Name</th>
<th>Address</th>
<th>Population</th>
<th>Collection 1</th>
<th>collection 2</th>
</tr>
</thead>
<tbody class="used-community">
<tr id="47" class="rowList middle">
<td>Wangkha</td>
<td>Soi Wangkha 3</td>
<td class="plant_counter_1">100000</td>
<td>31</td>
<td>11315</td>
</tr>
<tr id="43" class="rowList middle">
<td>one</td>
<td>one address</td>
<td class="plant_counter_1">35000</td>
<td>7</td>
<td>2555</td>
</tr>
<tr id="46" class="rowList middle">
<td>Bang</td>
<td>Bang khuwang Rd</td>
<td class="plant_counter_1">6000</td>
<td>2</td>
<td>730</td>
</tr>
<tr bgcolor="#66CCFF">
<td></td>
<td></td>
<td></td>
<td class="col"></td>
<td class="cap"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table class="table" border="1">
<thead>
<tr class="titlerow">
<th>Name</th>
<th>Address</th>
<th>Population</th>
<th>Collection 1</th>
<th>collection 2</th>
</tr>
</thead>
<tbody class="used-community">
<tr id="45" class="rowList middle">
<td>sap</td>
<td>sap thawi</td>
<td class="plant_counter_2">80000</td>
<td>15</td>
<td>5475</td>
</tr>
<tr id="44" class="rowList middle">
<td>two-nonthaburi</td>
<td>nonthaburi</td>
<td class="plant_counter_2">69000</td>
<td>11</td>
<td>4015</td>
</tr>
<tr bgcolor="#66CCFF">
<td></td>
<td></td>
<td></td>
<td class="col"></td>
<td class="cap"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Related
i am having table data like this
how to remove text on specific td ( Generasi, Unit Code, Agent Code, Unit Name ) with having duplicate text and keep only 1
so the results can be like this
this is my fiddle
JSFIDDLE
I Have Fixed this. Please find the below changes in html and script.
This code will add a table below your table which is not sorted and remove your js totally and paste the below.
In HTML I have added a div below
var FinalIndex = [];
var tbl = $('table#tableUnit tr').get().map(function(row) {
return $(row).find('td').get().map(function(cell) {
return $(cell).html();
});
});
/* console.log(tbl) */
$.each(tbl, function(index, data) {
if (data.length > 5) {
console.log('data:' + index);
count = 0;
$.each(tbl, function(indexF, dataF) {
if (indexF <= index) {
if (data[0] == dataF[0] && data[1] == dataF[1] && data[2] == dataF[2] && data[3] == dataF[3] && count == 0 && count == 0) {
count = count + 1;
if (index == indexF) {
console.log("comparing :" + index + "with" + indexF);
console.log('count:' + count);
console.log(data[0] + '.' + data[1] + " first value " + dataF[0]);
FinalIndex.push(index);
}
}
}
});
} else {
FinalIndex.push(index);
}
});
console.log(FinalIndex)
function makeTable(tbl) {
var table = '<table>';
$.each(tbl, function(index, value) {
if (jQuery.inArray(index, FinalIndex) !== -1) {
table += '<tr>';
$.each(value, function(ind, v1) {
/* console.log(ind); */
table += '<td>' + v1 + '</td>';
});
table += '</tr>';
}
});
/* return ($(table)); */
table += '</table>';
console.log(table);
$('.finalTable').html(table);
};
makeTable(tbl);
$('#btnOrig').click(function(){
$('#orig_table').toggle();
});
#orig_table{border:1px solid red;box-sizing:border-box;display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<button id="btnOrig">Show Original Table</button>
<div id="orig_table">
<table class="table" id="tableUnit" style="width: 100%;">
<thead>
<tr>
<th style="width: 7em;"><strong>Generasi</strong></th>
<th style="width: 20em;"><strong>Unit Code</strong></th>
<th style="width: 20em;"><strong>Agent Code Unit</strong></th>
<th style="width: 6em;"><strong>Unit Name</strong></th>
<th style="width: 6em;" class="center"><strong>No.</strong></th>
<th style="width: 5em;"><strong>Agent Code</strong></th>
<th style="width: 15em;"><strong>Agent Name</strong></th>
<th style="width: 15em;"><strong>VOC</strong></th>
<th style="width: 15em;"><strong>KPM</strong></th>
<th style="width: 15em;" class="right"><strong>Case</strong></th>
<th style="width: 15em;" class="right"><strong>ALP</strong></th>
<th></th>
</tr>
</thead>
<tbody>
<tr bgcolor="#ededf9">
<td colspan="8" class="right"><strong>SUB TOTAL G-0</strong></td>
<td></td>
<td class="right"><strong>0</strong></td>
<td class="right"><strong>0</strong></td>
<td></td>
</tr>
<tr>
<td colspan="12"></td>
</tr>
</tbody>
<tbody>
<tr>
<td>G-1</td>
<td>A6011</td>
<td>00923917</td>
<td>FRANSISKA YULIANA B.D.</td>
<td>1</td>
<td>00905445</td>
<td>NESTI RAHAYU</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-1</td>
<td>A6011</td>
<td>00923917</td>
<td>FRANSISKA YULIANA B.D.</td>
<td>2</td>
<td>00905448</td>
<td>AISYAH</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">30.000.000</td>
<td></td>
</tr>
<tr>
<td>G-1</td>
<td>A6011</td>
<td>00923917</td>
<td>FRANSISKA YULIANA B.D.</td>
<td>3</td>
<td>00905454</td>
<td>ADYANTA YOGA PRADANA</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-1</td>
<td>A7924</td>
<td>00947903</td>
<td>MELVA SUPARDI</td>
<td>4</td>
<td>00947903</td>
<td>MELVA SUPARDI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr bgcolor="#ededf9">
<td colspan="8" class="right"><strong>SUB TOTAL G-1</strong></td>
<td></td>
<td class="right"><strong>5</strong></td>
<td class="right"><strong>48.000.000</strong></td>
<td></td>
</tr>
<tr>
<td colspan="12"></td>
</tr>
</tbody>
<tbody>
<tr>
<td>G-2</td>
<td>A5974</td>
<td>00923389</td>
<td>ALI WIDODO</td>
<td>1</td>
<td>00918088</td>
<td>JOHN HENDRI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">12.000.000</td>
<td></td>
</tr>
<tr>
<td>G-2</td>
<td>A5993</td>
<td>00923678</td>
<td>PATENSAROHA PANJAITAN</td>
<td>2</td>
<td>00924255</td>
<td>PURNAMA MARINTAN</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">4</td>
<td class="right">28.800.000</td>
<td></td>
</tr>
<tr>
<td>G-2</td>
<td>A8603</td>
<td>00966488</td>
<td>RISANG RUDI PERMADI</td>
<td>3</td>
<td>00966488</td>
<td>RISANG RUDI PERMADI</td>
<td>SM</td>
<td>SMG043</td>
<td class="right">2</td>
<td class="right">31.200.000</td>
<td></td>
</tr>
<tr bgcolor="#ededf9">
<td colspan="8" class="right"><strong>SUB TOTAL G-2</strong></td>
<td></td>
<td class="right"><strong>8</strong></td>
<td class="right"><strong>72.000.000</strong></td>
<td></td>
</tr>
<tr>
<td colspan="12"></td>
</tr>
</tbody>
<tbody>
<tr>
<td>G-3</td>
<td>A2190</td>
<td>00906041</td>
<td>LIESTYANINGSIH PRASETYO</td>
<td>1</td>
<td>00906041</td>
<td>LIESTYANINGSIH PRASETYO</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A6659</td>
<td>00910973</td>
<td>FERMOLINA</td>
<td>2</td>
<td>00910973</td>
<td>FERMOLINA</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">4</td>
<td class="right">73.000.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A5974</td>
<td>00923389</td>
<td>ALI WIDODO</td>
<td>3</td>
<td>00911258</td>
<td>CAROTRIANA HARTIANI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">8.400.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A7824</td>
<td>00913029</td>
<td>YULI PURWANTI</td>
<td>4</td>
<td>00913029</td>
<td>YULI PURWANTI</td>
<td>SM</td>
<td>SMG043</td>
<td class="right">1</td>
<td class="right">4.800.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A8603</td>
<td>00966488</td>
<td>RISANG RUDI PERMADI</td>
<td>5</td>
<td>00925635</td>
<td>RICHA DEWI AZDANI</td>
<td>SM</td>
<td>SMG043</td>
<td class="right">4</td>
<td class="right">18.000.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A2006</td>
<td>00905496</td>
<td>MARYANAH</td>
<td>6</td>
<td>00941248</td>
<td>ROCHIMI DIAN PUSPITASARI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">9.600.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A7240</td>
<td>00942942</td>
<td>SOE ESTI MURNIATI</td>
<td>7</td>
<td>00942942</td>
<td>SOE ESTI MURNIATI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">3</td>
<td class="right">23.040.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A8053</td>
<td>00951213</td>
<td>A. M. GANDA MARPAUNG</td>
<td>8</td>
<td>00951213</td>
<td>A. M. GANDA MARPAUNG</td>
<td>JB3</td>
<td>JAM707</td>
<td class="right">1</td>
<td class="right">4.800.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A2006</td>
<td>00905496</td>
<td>MARYANAH</td>
<td>9</td>
<td>00953857</td>
<td>MOCH KEMAL ASYAF</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">36.000.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A2006</td>
<td>00905496</td>
<td>MARYANAH</td>
<td>10</td>
<td>00968671</td>
<td>GITA NELWAN</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">12.000.000</td>
<td></td>
</tr>
<tr bgcolor="#ededf9">
<td colspan="8" class="right"><strong>SUB TOTAL G-3</strong></td>
<td></td>
<td class="right"><strong>21</strong></td>
<td class="right"><strong>195.640.000</strong></td>
<td></td>
</tr>
<tr>
<td colspan="12"></td>
</tr>
</tbody>
<tbody>
<tr>
<td>G-4</td>
<td>A4040</td>
<td>00909748</td>
<td>KARINA</td>
<td>1</td>
<td>00909748</td>
<td>KARINA</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">54.000.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A6091</td>
<td>00910151</td>
<td>NONAH SUHANAH</td>
<td>2</td>
<td>00910517</td>
<td>ALFIAN IDRUS</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A5974</td>
<td>00923389</td>
<td>ALI WIDODO</td>
<td>3</td>
<td>00912869</td>
<td>ROHMAT</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">12.060.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A6659</td>
<td>00910973</td>
<td>FERMOLINA</td>
<td>4</td>
<td>00925358</td>
<td>ANDRIYANI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">8.400.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A6789</td>
<td>00909167</td>
<td>WAHYU RIDWAN NUGROHO</td>
<td>5</td>
<td>00938577</td>
<td>ACHMAD TAUFIK</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">4.800.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A8822</td>
<td>00944260</td>
<td>DESSY RANTAU WIDIASARI</td>
<td>6</td>
<td>00944260</td>
<td>DESSY RANTAU WIDIASARI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A8896</td>
<td>00946599</td>
<td>ILHAM WAHYUDIN</td>
<td>7</td>
<td>00946599</td>
<td>ILHAM WAHYUDIN</td>
<td>SB</td>
<td>SKB008</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A6091</td>
<td>00910151</td>
<td>NONAH SUHANAH</td>
<td>8</td>
<td>00947779</td>
<td>YENNI CHRISTINA</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">12.000.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A7204</td>
<td>00941979</td>
<td>MANUELA R SIAGIAN</td>
<td>9</td>
<td>00959611</td>
<td>LAURENTIA DYAH IKA G</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">10.400.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A2042</td>
<td>00905588</td>
<td>HENY BAYU SAFITRI</td>
<td>10</td>
<td>00965234</td>
<td>YASAN</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">12.000.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A6659</td>
<td>00910973</td>
<td>FERMOLINA</td>
<td>11</td>
<td>00968489</td>
<td>ANDRE PERBAWA</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">3</td>
<td class="right">36.000.000</td>
<td></td>
</tr>
<tr bgcolor="#ededf9">
<td colspan="8" class="right"><strong>SUB TOTAL G-4</strong></td>
<td></td>
<td class="right"><strong>14</strong></td>
<td class="right"><strong>167.660.000</strong></td>
<td></td>
</tr>
<tr>
<td colspan="12"></td>
</tr>
</tbody>
<tbody>
<tr>
<td>G-5</td>
<td>A2157</td>
<td>00905917</td>
<td>SYARIFAH</td>
<td>1</td>
<td>00905917</td>
<td>SYARIFAH</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">4</td>
<td class="right">30.000.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A2043</td>
<td>00905590</td>
<td>BUNGAIDAL ADKHIA</td>
<td>2</td>
<td>00911669</td>
<td>ZULFIKAR</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">18.000.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A8896</td>
<td>00946599</td>
<td>ILHAM WAHYUDIN</td>
<td>3</td>
<td>00914524</td>
<td>RITAWATI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">3</td>
<td class="right">13.200.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A8896</td>
<td>00946599</td>
<td>ILHAM WAHYUDIN</td>
<td>4</td>
<td>00923652</td>
<td>DEDEN AMARULLAH</td>
<td>SB</td>
<td>SKB008</td>
<td class="right">1</td>
<td class="right">4.200.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A6916</td>
<td>00937689</td>
<td>SUDIRMAN</td>
<td>5</td>
<td>00937689</td>
<td>SUDIRMAN</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A8199</td>
<td>00944267</td>
<td>DEWI KARTINI</td>
<td>6</td>
<td>00944267</td>
<td>DEWI KARTINI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">30.000.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A8131</td>
<td>00954706</td>
<td>HENDRA SURYA</td>
<td>7</td>
<td>00954706</td>
<td>HENDRA SURYA</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">15.600.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A6307</td>
<td>00911807</td>
<td>BERTA M PURBA</td>
<td>8</td>
<td>00964680</td>
<td>DANIEL</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A8822</td>
<td>00944260</td>
<td>DESSY RANTAU WIDIASARI</td>
<td>9</td>
<td>00967703</td>
<td>YANTI ARIANI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">18.000.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A7824</td>
<td>00913029</td>
<td>YULI PURWANTI</td>
<td>10</td>
<td>00968122</td>
<td>NOVIA BETSY CLARISSA</td>
<td>SM</td>
<td>SMG043</td>
<td class="right">1</td>
<td class="right">24.000.000</td>
<td></td>
</tr>
<tr bgcolor="#ededf9">
<td colspan="8" class="right"><strong>SUB TOTAL G-5</strong></td>
<td></td>
<td class="right"><strong>18</strong></td>
<td class="right"><strong>165.000.000</strong></td>
<td></td>
</tr>
<tr>
<td colspan="12"></td>
</tr>
</tbody>
<tfoot>
<tr bgcolor="#ededf9">
<td colspan="8" class="right"><strong>GRAND TOTAL</strong></td>
<td></td>
<td class="right"><strong>66</strong></td>
<td class="right"><strong>648.300.000</strong></td>
<td></td>
</tr>
</tfoot>
</table>
</div><!-- #orig_table -->
<h2>Final Table:</h2>
<div class="finalTable"></div>
So the problem I'm having is that my jQuery code is somehow detecting more children than there exist in for an element. I'll do my best to explain what I'm trying to do.
I have a table in the following format:
<table>
<!-- BEGIN SECTION: General Attributes -->
<tbody class="tableHeadings">
<tr>
<th colspan="2">
<hr />
<h3 class="tableSectionHeader">General Characteristics</h3>
<hr />
</th>
</tr>
<tr>
<th class="library-card-header" id="venue">Venue</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="pubYear">Publication Year</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="abstract">Abstract</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="author">Authors</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="url">URL</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="researchQuestions">Research Question</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="experienceDescription">Experience Description</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="whatMeasured">What Measured</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="howMeasured">How Measured</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="articleEvaluationTool">Evaluation Tool Used</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="reportType">Report Type</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="studyDesign">Study Design</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="researchApproach">Research Approach</th>
<td></td>
</tr>
</tbody>
<tbody class="tableHeadings durationHeader">
<tr>
<th colspan="2">
<hr />
<h3 class="tableSectionHeader">Duration Information</h3>
<hr />
</th>
</tr>
<tr>
<th class="library-card-header" id="years">Total Years</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="semesters">Total Semesters</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="months">Total Months</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="weeks">Total Weeks</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="days">Total Days</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="hours">Total Hours</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="minutes">Total Minutes</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="daysPerWeek">Days Per Week</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="hoursPerDay">Hours Per Day</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="minutesPerDay">Minutes Per Day</th>
<td></td>
</tr>
</tbody>
</table>
What I'm doing is using JS to populate the td's with the relative information if it exists in the database. If it doesn't I'm removing the tr altogether so it doesn't show up at all on the page (rather than showing up with just heading and no information). The populating part is working seamlessly. However, removing the sections which have no data is not working for only the section 'duration header'.
The JS code I wrote to achieve this is:
jQuery("th").each(function(item){
var idAttribute = jQuery(this).attr("id");
var result = data[idAttribute];
if(result == undefined || result.length == 0) {
// Remove any element that has no data. Skip over the section headers.
if (idAttribute !== undefined)
jQuery(this).parent().remove();
return;
}
// Remove any duration information with a zero value.
if (isDurationAttr(idAttribute))
{
if (result === 0)
{
jQuery(this).parent().remove();
return;
}
}
jQuery('.tableHeadings').each(function() {
// console.log(jQuery(this).children().length);
if (jQuery(this).children().length == 1) {
jQuery(this).remove();
return;
}
});
var tree = jQuery(".durationHeader").map(function(){
return this.innerHTML;
}).get().join(", ");
console.log(tree);
});
While debugging this, I tried to print out the number of children in the last part and then the html that is in the durationHeader section.
the method
jQuery('.tableHeadings').each(function() {
// console.log(jQuery(this).children().length);
if (jQuery(this).children().length == 1) {
jQuery(this).remove();
return;
}
});
should essentially get rid of the durationHeader section. However, when I print out the html, its showing all the elements. For some very weird reason, this is not happening for the first tbody, which is also a class tableHeadings. When I printed out the children in durationHeader, it says that the element has 11 children. It should have only 1, which is the heading of that section.
Can someone please look into this and tell me what is going on? I've been stuck on this for 2 days now.
Look closely your first tbody has 14 tr elements while the second tbody has 11. The code is working fine. Tell me if that's not what you were looking for.
Edit: I think I know what you're not understanding: jQuery('.tableHeadings') contains two elements, the two elements with class name .tableHeadings. So when you apply each you're not looping through each child of the table portion, you're looping through each table portion (here there are two). Therefore accessing children will get you the tr elements instead of the child of the first tr: th.
jQuery('.tableHeadings').each(function() {
console.log(jQuery(this).children().length);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<!-- BEGIN SECTION: General Attributes -->
<tbody class="tableHeadings">
<tr>
<th colspan="2">
<hr />
<h3 class="tableSectionHeader">General Characteristics</h3>
<hr />
</th>
</tr>
<tr>
<th class="library-card-header" id="venue">Venue</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="pubYear">Publication Year</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="abstract">Abstract</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="author">Authors</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="url">URL</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="researchQuestions">Research Question</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="experienceDescription">Experience Description</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="whatMeasured">What Measured</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="howMeasured">How Measured</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="articleEvaluationTool">Evaluation Tool Used</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="reportType">Report Type</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="studyDesign">Study Design</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="researchApproach">Research Approach</th>
<td></td>
</tr>
</tbody>
<tbody class="tableHeadings durationHeader">
<tr>
<th colspan="2">
<hr />
<h3 class="tableSectionHeader">Duration Information</h3>
<hr />
</th>
</tr>
<tr>
<th class="library-card-header" id="years">Total Years</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="semesters">Total Semesters</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="months">Total Months</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="weeks">Total Weeks</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="days">Total Days</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="hours">Total Hours</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="minutes">Total Minutes</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="daysPerWeek">Days Per Week</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="hoursPerDay">Hours Per Day</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="minutesPerDay">Minutes Per Day</th>
<td></td>
</tr>
</tbody>
</table>
In html I have my markup is like this
<table class="section-table">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
I want to add a class for each last tbody after thead. So basically my output should be like this
<table class="section-table">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody class="last-row">
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody class="last-row">
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody class="last-row">
<tr>
<td></td>
</tr>
</tbody>
</table>
I have tried this code but its not working at all.
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).nextAll('tbody').last().addClass('last-row');
});
You can add that class to all tbody before thead and then add same class to last tbody
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).prev('tbody').addClass('last-row');
});
jQuery('table.section-table').find('tbody').last().addClass('last-row');
Demo
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).prev('tbody').addClass('last-row');
});
jQuery('table.section-table').find('tbody').last().addClass('last-row');
.last-row
{
background-color:#ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="section-table">
<thead>
<tr>
<th>12</th>
</tr>
</thead>
<tbody>
<tr>
<td>312</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<thead>
<tr>
<th>rftg</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<thead>
<tr>
<th>g</th>
</tr>
</thead>
<tbody>
<tr>
<td>345</td>
</tr>
</tbody>
</table>
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).prev('tbody').addClass('last-row');
});
$('table.section-table tbody:last-child').addClass('last-row');
.section-table tbody{
background-color:#F00;
}
.section-table tbody.last-row{
background-color:#FF0;
}
.section-table td{
height:30px;
width:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table class="section-table">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
Try prev('tbody'), since you don't have thead at the end, you need to add tbody:last-child as well.
You can first add the class to all the <tbody> that is just a previous element of the <thead>. Using this will leave you with the last <tbody> unchanged in the HTML table so you should add one more line of JQuery that will add class to this remaining last <tbody>.
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).prev('tbody').addClass('last-row');
});
$('table.section-table tbody').last().addClass('last-row');
.last-row{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="section-table">
<thead>
<tr>
<th>0</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
</tr>
</tbody>
<tbody>
<tr>
<td>2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>3</td>
</tr>
</tbody>
<tbody>
<tr>
<td>4</td>
</tr>
</tbody>
<tbody>
<tr>
<td>5</td>
</tr>
</tbody>
<tbody>
<tr>
<td>6</td>
</tr>
</tbody>
<tbody>
<tr>
<td>7</td>
</tr>
</tbody>
<thead>
<tr>
<th>8</th>
</tr>
</thead>
<tbody>
<tr>
<td>9</td>
</tr>
</tbody>
<tbody>
<tr>
<td>10</td>
</tr>
</tbody>
<thead>
<tr>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
</tr>
</tbody>
</table>
You can use .nextUntil() to target all siblings till <THEAD> is encountered then use .last() to get the desired element and add class.
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).nextUntil('thead').last().addClass('last-row');
});
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).nextUntil('thead').last().addClass('last-row');
});
.last-row {
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="section-table">
<thead>
<tr>
<th>HEAD 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>312</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<thead>
<tr>
<th>HEAD 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<thead>
<tr>
<th>HEAD 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>345</td>
</tr>
</tbody>
</table>
I have a loop where i want display tables and calculate the sum here is html
#for (int i = 0; i < 3; i++) {
<table id="table #i" class="tableSum">
<thead>
<tr>
<td>Items</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>5</td>
<td>100</td>
</tr>
<tr>
<td>Organe</td>
<td>5</td>
<td>200</td>
</tr>
<tr>
<td>Banana</td>
<td>5</td>
<td>200</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
}
In javascript i wrote this code, I want the method can sum up all data in column 2 and 3 then display on the footer of each table in a loop, but when i run this code, it returned wrong sum and only display in 1st table.
$(document).ready(function () {
$('table').each(function () {
calculateColumn(1);
calculateColumn(2);
})
});
function calculateColumn(index) {
var total = 0;
$('table tr').each(function () {
var value = parseInt($('td', this).eq(index).text());
if (!isNaN(value)) {
total += value;
}
});
$('table tfoot td').eq(index).text(total);
}
When you say $('table tr').each(), it iterates over all the tr elements in the page, not just the one's in the current table(which is targeted by $('table').each())
You need to pass the table reference to the calculate method
$(document).ready(function() {
$('table').each(function() {
calculateColumn(this, 1);
calculateColumn(this, 2);
})
});
function calculateColumn(table, index) {
var total = 0;
$(table).find('tbody td:nth-child(' + (index + 1) + ')').each(function() {
total += +$(this).text() || 0;
});
$(table).find('tfoot td').eq(index).text(total);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table1" class="tableSum">
<thead>
<tr>
<td>Items</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>6</td>
<td>100</td>
</tr>
<tr>
<td>Organe</td>
<td>6</td>
<td>150</td>
</tr>
<tr>
<td>Banana</td>
<td>3</td>
<td>75</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
<table id="table1" class="tableSum">
<thead>
<tr>
<td>Items</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>5</td>
<td>120</td>
</tr>
<tr>
<td>Organe</td>
<td>4</td>
<td>100</td>
</tr>
<tr>
<td>Banana</td>
<td>5</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
<table id="table1" class="tableSum">
<thead>
<tr>
<td>Items</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>10</td>
<td>100</td>
</tr>
<tr>
<td>Organe</td>
<td>5</td>
<td>300</td>
</tr>
<tr>
<td>Banana</td>
<td>5</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
Fiddle Example
I have two example tables with subject titles in the first cells.
<table class='sort connect'>
<thead>
<tr>
<th class='ui-state-disabled'></th>
<th>Person 1</th>
<th>Person 2</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ui-state-disabled'>Age</td>
<td>18</td>
<td>23</td>
</tr>
<tr>
<td class='ui-state-disabled'>Job</td>
<td>Clerk</td>
<td>Policeman</td>
</tr>
</tbody>
</table>
<table class='sort connect'>
<thead>
<tr>
<th class='ui-state-disabled'></th>
<th>Person 3</th>
<th>Person 4</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ui-state-disabled'>Age</td>
<td>17</td>
<td>46</td>
</tr>
<tr>
<td class='ui-state-disabled'>Job</td>
<td>Student</td>
<td>Firefighter</td>
</tr>
</tbody>
</table>
I've made the first child of th and td unsortable since they are titles. Is there any way to move other columns, one at a time (td:nth-child,th:nth-child), to the other table using jQueryUI sortable?
How can I make a whole column sortable in the change or start event?
Here's my expected output:
<table class='sort connect'>
<thead>
<tr>
<th class='ui-state-disabled'></th>
<th>Person 1</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ui-state-disabled'>Age</td>
<td>18</td>
</tr>
<tr>
<td class='ui-state-disabled'>Job</td>
<td>Clerk</td>
</tr>
</tbody>
</table>
<table class='sort connect'>
<thead>
<tr>
<th class='ui-state-disabled'></th>
<th>Person 3</th>
<th>Person 2</th> // sorted
<th>Person 4</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ui-state-disabled'>Age</td>
<td>17</td>
<td>23</td> //sorted
<td>46</td>
</tr>
<tr>
<td class='ui-state-disabled'>Job</td>
<td>Student</td>
<td>Policeman</td> //sorted
<td>Firefighter</td>
</tr>
</tbody>
</table>
JS code:
var fixHelperModified = function(e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index)
{
$(this).width($originals.eq(index).width())
});
return $helper;
};
$(function() {
$( ".sort" ).sortable({
change: function( event, ui ) {
var see = ui.item.index();
console.log(see);
$(this).find('td:nth-child(see),th:nth-child(see)')
},
helper: fixHelperModified,
cancel: ".ui-state-disabled",
connectWith: ".connect"
}).disableSelection();
});
What about something like this?
It's a workaround for what you're asking, but it does basically the same thing, just fix the styling, spaces, etc. as you'd like
HTML
<div class="sortableContainer sort connect">
<div>
<table>
<thead>
<tr>
<td height="20px"></td>
</tr>
</thead>
<tbody>
<tr>
<td>Age</td>
</tr>
<tr>
<td>Job</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<td>Person 1</td>
</tr>
</thead>
<tbody>
<tr>
<td>18</td>
</tr>
<tr>
<td>Clerk</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<td>Person 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>23</td>
</tr>
<tr>
<td>Policeman</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="sortableContainer sort connect">
<div>
<table>
<thead>
<tr>
<td height="20px"></td>
</tr>
</thead>
<tbody>
<tr>
<td>Age</td>
</tr>
<tr>
<td>Job</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<td>Person 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>17</td>
</tr>
<tr>
<td>Student</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<td>Person 4</td>
</tr>
</thead>
<tbody>
<tr>
<td>46</td>
</tr>
<tr>
<td>Firefighter</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS
td, th {
border:1px solid #222
}
.red {
background:red
}
.ui-state-disabled {
opacity:1
}
.sortableContainer>div {
display:inline-block;
}
table {
border-spacing:0px;
border-collapse:collapse;
}
JS
$(function () {
$(".sort").sortable({
connectWith: ".connect"
}).disableSelection();
});