Javascript read table and if value != null get rows data - javascript

How can I read a table using Javascript and lookup on each Row from the table if the value of [X] cell in the row is != null, save that row data.
Currently I've just found how to read the whole table using this script
<div class="container-fluid">
<div class="card shadow mb-4">
<div class="card-header py-3">
<table class="table table-bordered" width="100%" cellspacing="0" id="tableID">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>500</td>
<td id="myID"><input type="hidden" name="txtID" id="txtID" value="100"></td>
</tr>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>1500</td>
<td id="myID"><input type="hidden" name="txtID" id="txtID" value="200"></td>
</tr>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>1500</td>
<td id="myID"><input type="hidden" name="txtID" id="txtID" value=""></td>
</tr>
</tbody>
</table>
<script>
var myTab = document.getElementById('tableID');
var tableData = [];
// LOOP THROUGH EACH ROW OF THE TABLE AFTER HEADER.
for (i = 1; i < myTab.rows.length; i++) {
if(){
}else{
}
}
</script>
Can I get help to complete the syntax of the script or can I get some direction on how to solve this
In this table example, the output or the rows that shall be grabbed would be the first 2 tr's since they are != null


First of all the attribute id must be unique in document, use class instead.
You can use querySelectorAll() to target the inputs whose value is not null using attribute selector. Then use map() like the following way:
var myTab = document.querySelectorAll('#tableID tbody tr .txtID:not([value=""])');
var tableData = Array.from(myTab).map(input => input.value);
console.log(tableData);
<table class="table table-bordered" width="100%" cellspacing="0" id="tableID">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>500</td>
<td class="myID"><input type="hidden" name="txtID" class="txtID" value="100"></td>
</tr>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>1500</td>
<td class="myID"><input type="hidden" name="txtID" class="txtID" value="200"></td>
</tr>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>1500</td>
<td class="myID"><input type="hidden" name="txtID" class="txtID" value=""></td>
</tr>
</tbody>
</table>
UPDATE: You can get all the cell value in the form of objects like the following way:
var myTab = document.querySelectorAll('#tableID tbody tr .txtID:not([value=""])');
var tableData = [];
Array.from(myTab).forEach(input => {
var tds = input.closest('tr').children;
var obj = {};
obj.A = tds[0].textContent;
obj.B = tds[1].textContent;
obj.C = tds[2].textContent;
obj.D = tds[3].textContent;
obj.E = input.value;
tableData.push(obj);
});
console.log(tableData);
<table class="table table-bordered" width="100%" cellspacing="0" id="tableID">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>500</td>
<td class="myID"><input type="hidden" name="txtID" class="txtID" value="100"></td>
</tr>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>1500</td>
<td class="myID"><input type="hidden" name="txtID" class="txtID" value="200"></td>
</tr>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>1500</td>
<td class="myID"><input type="hidden" name="txtID" class="txtID" value=""></td>
</tr>
</tbody>
</table>


Use cells to get the cells of the row, and then get the value of the input in cells[4]. If it's not an empty string, save it to the array.
var myTab = document.getElementById('tableID');
var tableData = [];
// LOOP THROUGH EACH ROW OF THE TABLE AFTER HEADER.
for (var i = 1; i < myTab.rows.length; i++) {
var val = myTab.rows[i].cells[4].firstElementChild.value;
if (val != '') {
tableData.push(val);
}
}
console.log(tableData);
<table class="table table-bordered" width="100%" cellspacing="0" id="tableID">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>500</td>
<td id="myID"><input type="hidden" name="txtID" id="txtID" value="100"></td>
</tr>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>1500</td>
<td id="myID"><input type="hidden" name="txtID" id="txtID" value="200"></td>
</tr>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>1500</td>
<td id="myID"><input type="hidden" name="txtID" id="txtID" value=""></td>
</tr>
</tbody>
</table>

Related

Accessing HTML Table cell and Change the value

I need to access the cell of an HTML Table and change Its value. The method I tried didn't worked out. Refer the screenshot as well.
Cannot use the following method, since there were multiple with same value in some cases. I need to access the specific marked cell.
$('td:contains("1200")').text('....');
Cell need to access and Change the amount
<table class="table table-striped">
<thead>
<tr>
<th>Loan amount</th>
<th>New loan installment amount (first installment)</th>
<th>DSCR (both new and existing)</th>
</tr>
</thead>
<tbody>
<tr>
<td id="ValueOne">LKR 12000</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
Accessing by ID And changing the value didn't worked.
document.getElementById("ValueOne").innerHTML = 'New Value';

Since you kindly provided us with an ID. Simply use:
Javascript:
document.getElementById("ValueOne").innerHTML = "LKR 100"
JQuery:
$("#ValueOne").text("LKR 100")
Demo: https://jsfiddle.net/fme8v6oa/
Options:
document.getElementsByTagName("td")[0].innerHTML = "LKR 100"

Your javascript code works, make sure to run your script after the page is loaded.
Here is an example using a button:
<table class="table table-striped">
<thead>
<tr>
<th>Loan amount</th>
<th>New loan installment amount (first installment)</th>
<th>DSCR (both new and existing)</th>
</tr>
</thead>
<tbody>
<tr>
<td id="ValueOne">LKR 12000</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
<button onclick="changeme()">Change</button>
<script>
function changeme(){
document.getElementById("ValueOne").innerHTML = 'New Value';
}
</script>

Using jquery :
$('#mytable tr').each(function() {
$(this).find("#ValueOne").html("new value");
});
where mytable is the Id of your table
Demo : https://jsfiddle.net/xLz6f49h/4/

<html>
<body>
<table class="table table-striped">
<thead>
<tr>
<th>Loan amount</th>
<th>New loan installment amount (first installment)</th>
<th>DSCR (both new and existing)</th>
</tr>
</thead>
<tbody>
<tr>
<td id="Value1">LKR 12000</td>
<td id="Value2">Doe</td>
<td id="Value2">john#example.com</td>
</tr>
<tr>
<td id="Value3">Mary</td>
<td id="Value4">Moe</td>
<td id="Value5">mary#example.com</td>
</tr>
<tr>
<td id="Value6">July</td>
<td id="Value7">Dooley</td>
<td id="Value8">july#example.com</td>
</tr>
<tr>
<td id="Value9">July</td>
<td id="Value10">Dooley</td>
<td id="Value11">july#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
CELL id: <input type="text" name="celliD" id="input1"><br><br>
New CELL Value: <input type="text" name="celliD" id="input2"><br>
<button onclick="changeCellValue()">Change Value</button>
<script>
function changeCellValue(){
var inputVal = document.getElementById('input1').value;
var newVal = document.getElementById('input2').value;
if(inputVal == null || inputVal == "" && newVal == null || newVal == ""){
alert("value is required");
} else {
var changeVal = document.getElementById(inputVal).innerHTML = newVal;
}
}
</script>
<body>
</html>

Grab values from row if cell[X] has written input

Hello everyone right now I'm trying to retrieve informatmion inside a table, I currently have this example in order to retrieve all the row values if value="!= null", but if I remove the attribute value="" in my inputs I can't grab the information I type inside the inputs
<table class="table table-bordered" width="100%" cellspacing="0" id="tableID">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">val1</td>
<td align="center">val2</td>
<td align="center">val3</td>
<td align="center">1500</td>
<td align="center" class="myID"><input type="number" name="txtID" class="txtID" value="123"></td>
</tr>
<tr>
<td align="center">val1</td>
<td align="center">val2</td>
<td align="center">val3</td>
<td align="center">1500</td>
<td align="center" class="myID"><input type="number" name="txtID" class="txtID" value=""></td>
</tr>
<tr>
<td align="center">val1</td>
<td align="center">val2</td>
<td align="center">val3</td>
<td align="center">1500</td>
<td align="center" class="myID"><input type="number" name="txtID" class="txtID" value=""></td>
</tr>
</tbody>
</table>
<button onclick="aplicar()">Aplicar</button>
<script>
</script>
<script>
function aplicar(){
var myTab = document.querySelectorAll('#tableID tbody tr .txtID:not([value=""])');
var tableData = [];
Array.from(myTab).forEach(input => {
var tds = input.closest('tr').children;
var obj = {};
obj.A = tds[0].textContent;
obj.B = tds[1].textContent;
obj.C = tds[2].textContent;
obj.D = tds[3].textContent;
obj.E = input.value;
tableData.push(obj);
});
console.log(tableData);
}
</script>
This will input the first row data because it has 123 value inside, but I need to remove the value attribute and get the data I type inside the input.
I will post this information using AJAX at the end.

You can set the value attribute on input event:
function setValueAttr(el){
el.setAttribute('value', el.value)
}
function aplicar(){
var myTab = document.querySelectorAll('#tableID tbody tr .txtID:not([value=""])');
var tableData = [];
Array.from(myTab).forEach(input => {
var tds = input.closest('tr').children;
var obj = {};
obj.A = tds[0].textContent;
obj.B = tds[1].textContent;
obj.C = tds[2].textContent;
obj.D = tds[3].textContent;
obj.E = input.value;
tableData.push(obj);
});
console.log(tableData);
}
<table class="table table-bordered" width="100%" cellspacing="0" id="tableID">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">val1</td>
<td align="center">val2</td>
<td align="center">val3</td>
<td align="center">1500</td>
<td align="center" class="myID"><input type="number" name="txtID" class="txtID" oninput="setValueAttr(this)" value="123"></td>
</tr>
<tr>
<td align="center">val1</td>
<td align="center">val2</td>
<td align="center">val3</td>
<td align="center">1500</td>
<td align="center" class="myID"><input type="number" name="txtID" class="txtID" oninput="setValueAttr(this)" value=""></td>
</tr>
<tr>
<td align="center">val1</td>
<td align="center">val2</td>
<td align="center">val3</td>
<td align="center">1500</td>
<td align="center" class="myID"><input type="number" name="txtID" class="txtID" oninput="setValueAttr(this)" value=""></td>
</tr>
</tbody>
</table>
<button type="button" onclick="aplicar()">Aplicar</button>
OR: You can directly check the value of the element with if condition
function aplicar(){
var myTab = document.querySelectorAll('.txtID');
var tableData = [];
Array.from(myTab).forEach(input => {
if(input.value.trim() != ""){
var tds = input.closest('tr').children;
var obj = {};
obj.A = tds[0].textContent;
obj.B = tds[1].textContent;
obj.C = tds[2].textContent;
obj.D = tds[3].textContent;
obj.E = input.value;
tableData.push(obj);
}
});
console.log(tableData);
}
<table class="table table-bordered" width="100%" cellspacing="0" id="tableID">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">val1</td>
<td align="center">val2</td>
<td align="center">val3</td>
<td align="center">1500</td>
<td align="center" class="myID"><input type="number" name="txtID" class="txtID" value="123"></td>
</tr>
<tr>
<td align="center">val1</td>
<td align="center">val2</td>
<td align="center">val3</td>
<td align="center">1500</td>
<td align="center" class="myID"><input type="number" name="txtID" class="txtID" value=""></td>
</tr>
<tr>
<td align="center">val1</td>
<td align="center">val2</td>
<td align="center">val3</td>
<td align="center">1500</td>
<td align="center" class="myID"><input type="number" name="txtID" class="txtID" value=""></td>
</tr>
</tbody>
</table>
<button type="button" onclick="aplicar()">Aplicar</button>

How to find the sum of dynamically generated multiple table columns

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>

Jquery search withing the table

Hi I need to search using the jquery within a table. But the issue is the my code is searching only the first element of all rows instead of searching whole table and show result. How can i search the whole table?
Here is my jquery code
$("#search").on("keyup", function() {
var value = $(this).val();
$(".table tr").each(function(index) {
if (index !== 0) {
$row = $(this);
var id = $row.find("td").text();
if (id.indexOf(value) !== 0) {
$row.hide();
</td>');
}
else {
$row.show();
}
}
});
});
Here is my html Table:
<input type="text" class="form-control" name="search" id="search" placeholder="Search Records">
<table class="table table-bordered table-striped" id="employees">
<thead>
<tr>
<th>No</th>
<th>Type</th>
<th>Name</th>
<th>Temp Address</th>
<th>Permanent Address</th>
<th>Mobile</th>
<th>Home</th>
<th>Update</th>
</tr>
</thead>
<tbody><tr>
<td>27006</td>
<td>Fixer</td>
<td>Sam</td>
<td>testing address</td>
<td></td>
<td>123456</td>
<td>123456</td>
</tr>
</tbody>
<tbody><tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>

Try this -
$("#search").keyup(function(){
_this = this;
$.each($("#employees tbody tr"), function() {
if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
$(this).hide();
else
$(this).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" name="search" id="search" placeholder="Search Records">
<table class="table table-bordered table-striped" id="employees">
<thead>
<tr>
<th>No</th>
<th>Type</th>
<th>Name</th>
<th>Temp Address</th>
<th>Permanent Address</th>
<th>Mobile</th>
<th>Home</th>
<th>Update</th>
</tr>
</thead>
<tbody>
<tr>
<td>27006</td>
<td>Fixer</td>
<td>Sam</td>
<td>testing address</td>
<td></td>
<td>123456</td>
<td>123456</td>
</tr>
</tbody>
<tbody><tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
Thanks

HTML table with rowspan reorder item drag and drop issue

my html code is
<table border='1px' id='sort'>
<thead>
<tr>
<th>SL</th>
<th>Sub Group</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan='3'>1</td>
<td rowspan='3'>Fruit</td>
<td>Mango</td>
</tr>
<tr>
<td>Orange</td>
</tr>
<tr>
<td>pineapple</td>
</tr>
<tr>
<td rowspan='2'>2</td>
<td rowspan='2'>Flower</td>
<td>Rose</td>
</tr>
<tr>
<td>sunflower</td>
</tr>
</tbody>
</table>
and js
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;
},
updateIndex = function(e, ui) {
$('td.index', ui.item.parent()).each(function (i) {
$(this).html(i + 1);
});
};
$("#sort tbody").sortable({
helper: fixHelperModified,
stop: updateIndex
}).disableSelection();
I want to reorder only subgroup like fruit mango,orange or sunflower,rose not the main group in the table.
The working fiddle is http://jsfiddle.net/p6c814o6/. How to solve this issue. Thank you.

Try this:
I have updated your fiddle JsFiddle. Your html was wrong according to your code. You must check your new html.
Instead Of using rowspans you must go with nested tables to achieve it.
<table border='1px' id='sort'>
<thead>
<tr>
<th>SL</th>
<th>Sub Group</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td >1</td>
<td >Fruit</td>
<td><table>
<tr>
<td>Mango</td>
</tr>
<tr>
<td>Orange</td>
</tr>
<tr>
<td>pineapple</td>
</tr></td>
</tr>
</table>
<tr>
<td >2</td>
<td >Flower</td>
<td><table>
<tr>
<td>
Rose
</td>
</tr>
<tr>
<td>sunflower</td>
</tr>
</table>
</td>
</tbody>
</table>
Check out the updated fiddle. If this is what you need.
Hope this helps JsFiddleUpdated

Categories

Resources