convert html table with various kind of condition to Json - javascript

I am stuck to generate the JSON based on the HTML below
<table>
<thead>
<tr>
<th>Date</th>
<th>Rainfall <small>(Milimeter)</small></th>
<th>Reservoir Level <small>(Meter)</small></th>
<th>T/Water <small>(Meter)</small></th>
<th>W/Supply <small>(Cumec)</small></th>
<th>C/Station <small>(Cumec)</small></th>
<th>Remarks </th>
<th>Task</th>
</tr>
</thead>
<tbody>
<tr>
<td>01/06/2014</td>
<td>120</td>
<td>120</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><span class="glyphicon glyphicon-ok"></span></td>
</tr>
<tr>
<td>02/06/2014</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><span class="glyphicon glyphicon-ok"></span></td>
</tr>
<tr>
<td>03/06/2014</td>
<td><input type="text" id="44"></td>
<td><input type="text" id="45"></td>
<td><input type="text" id="46"></td>
<td><input type="text" id="47"></td>
<td><input type="text" id="48"></td>
<td><input type="text" id="49"></td>
<td><button class="btn btn-info btn-xs Save">Save</button></td>
</tr>
<tr>
<td>04/06/2014</td>
<td><input type="text" id="44"></td>
<td><input type="text" id="45"></td>
<td><input type="text" id="46"></td>
<td><input type="text" id="47"></td>
<td><input type="text" id="48"></td>
<td><input type="text" id="49"></td>
<td><button class="btn btn-info btn-xs Save">Save</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="9"></td>
</tr>
</tfoot>
</table>
As you can see, some cell are blanks, some are mixed with <small>, <span>, and <input>. What I failed to achieve is how to produce the json out of this table in the following format
["Date", "Rainfall (milimeter)", "Reservoir Level (meter)","T/Water (meter)","W/Supply (cumec)","C/Station (cumec)","Remarks","Task"],
["01/06/2014", "120", "120","","","","","OK"],["02/06/2014", "120", "120","","","","","OK"],["03/06/2014", "12", "100","","","","","X"]
From the above format, you can see all values in cell are captured. As for <input> element, I need to pull value of it and append it to json result. Below is what I have right now. So far no luck
buildTableBody = function() {
var data = [],
table = $('table', el)[0];
for (var i=0; i<table.rows.length; i++) {
var tableRow = table.rows[i],
rowData = {};
for (var j=0; j<tableRow.cells.length; j++) {
var rc = tableRow.cells[j].innerHTML.toLowerCase().replace(/ /gi,'');
if ((rc) || (!_(rc).isBlank())) {
//console.log(rc);
var cl = _(_(rc).stripTags()).humanize();
if (cl == 'task') {
rowData[i] = 'Status';
} else if (cl == 'Save') {
rowData[i] = 'X'
}
} else {
rowData[i] = ' ';
}
}
data.push(rowData[i]);
}
//console.log(data);
return data;
}
Thank you

Related

How to create array of object from HTML Table in javascript?

How can I create an array of objects from an HTML table body? This is how my HTML looks like
<tbody id="metadata">
<tr>
<td><input type="numeric" /></td>
<td><input type="numeric" /></td>
</tr>
<tr>
<td><input type="numeric" /></td>
<td><input type="numeric" /></td>
</tr>
<tr>
<td><input type="numeric" /></td>
<td><input type="numeric" /></td>
</tr>
</tbody>
here is what I tried this javascript to get all the values from the table cell in an array of objects. I don't understand why my cMetadata always return a blank array
let cMetadata;
if (document.querySelectorAll("metadata")) {
let tableData = document.querySelectorAll("metadata");
cMetadata = [...tableData].map((row) => {
return {
altions: row.cells[0].textContent,
lexity: row.cells[1].textContent,
};
});
}
final array of object should look like
cMetadata = [{altions: 1 , lexity: 2},{altions: 2 , lexity: 2},{altions: 3 , lexity: 2}]
Verified that you have the tbody node inside a table node. You can get the items with document.querySelectorAll("#metadata tr"):
const btn = document.querySelector("button");
btn.addEventListener("click", () => {
const elements = document.querySelectorAll("#metadata tr");
const result = Array.from(elements).map(tr => {
const childs = tr.querySelectorAll("input");
return {
p1: childs[0].value,
p2: childs[1].value
};
});
console.log(result);
});
<table>
<tbody id="metadata">
<tr>
<td><input type="numeric"></td>
<td><input type="numeric"></td>
</tr>
<tr>
<td><input type="numeric"></td>
<td><input type="numeric"></td>
</tr>
<tr>
<td><input type="numeric"></td>
<td><input type="numeric"></td>
</tr>
</tbody>
</table>
<button>Get Data</button>

Calculate total value using jquery

I have a table like below :
<table>
<th>Sl No</th>
<th>Quantity</th>
<th>Price</th>
<th>Discount %</th>
<th>Total Price</th>
<tr>
<td>1</td>
<td><input class="expensess" ></input></td>
<td><input class="expensess" ></input></td>
<td><input class="expensess" ></input></td>
<td><input class="expensess_sum"></input></td>
</tr>
<tr>
<td>2</td>
<td><input class="expensess" ></input></td>
<td><input class="expensess" ></input></td>
<td><input class="expensess" ></input></td>
<td><input class="expensess_sum"></input></td>
</tr>
</table>
Grand Total = <input id="grand_total">
I am trying to display the Total Price of each row using jquery keyup function.
and also want to display the grand total price of the each row.
the formula of finding the Total Price is given below :
discount_value = Price*(discount_percent/100)
discount_price = Price-discount_value
total_price = discount_price * quantity
How can I do this please help
i am trying simply just summing all value like this :
<script type="text/javascript">
$(document).ready(function(){
$(".expensess").each(function() {
$(document).on('keyup', '.expensess', function() {
sum($(this).parents("tr"));
});
});
});
function sum(parent){
var sum = 0;
$(parent).find(".expensess").each(function(){
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
$(parent).find(".expensess_sum").val(sum.toFixed(2));
}
</script>
But m confused how to implement the above formula for calculate the total price.
$('input.qty,input.price,input.discount').on('change keyup',function(){
var $tr = $(this).closest('tr'),
$qty = $tr.find('input.qty') ,
$price= $tr.find('input.price'),
$discount= $tr.find('input.discount'),
$total= $tr.find('input.expensess_sum'),
$grand_total=$('#grand_total');
$total.val($qty.val()*($price.val()-($price.val()*($discount.val()/100))));
var grandTotal=0;
$('table').find('input.expensess_sum').each(function(){
if(!isNaN($(this).val()))
{grandTotal += parseInt($(this).val());
}
});
if(isNaN(grandTotal))
grandTotal =0;
$grand_total.val(grandTotal)
})
input{
width:80px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table>
<tbody><tr>
<th>Sl No</th>
<th>Quantity</th>
<th>Price</th>
<th>Discount %</th>
<th>Total Price</th>
</tr>
<tr>
<td>1</td>
<td><input class="expensess qty"></td>
<td><input class="expensess price"></td>
<td><input class="expensess discount"></td>
<td><input class="expensess_sum" disabled=""></td>
</tr>
<tr>
<td>2</td>
<td><input class="expensess qty"></td>
<td><input class="expensess price"></td>
<td><input class="expensess discount"></td>
<td><input class="expensess_sum" disabled=""></td>
</tr>
</tbody></table>
Grand Total = <input id="grand_total" disabled="">
</body>
Did it by using simple java script Code!
var sumExpenses = 0;
var tdBudget = document.getElementById('tableBudget').getElementsByTagName('td');
for (var i = 0; i < tdBudget.length; i++) {
if (tdBudget[i].className == "spanexpense") {
sumExpenses += isNaN(tdBudget[i].innerHTML) ? 0 : parseInt(tdBudget[i].innerHTML);
}
}
document.getElementById('sumExpenses').innerHTML = sumExpenses;
<table class="table table-bordered">
<thead>
<tr>
<td class="label-title">Value</td>
<td class="label-title">Value</td>
<td class="label-title">Value</td>
</tr>
</thead>
<tbody id="tableBudget">
<tr>
<td class="spanexpense">
12
</td>
<td class="spanexpense">
23
</td>
<td class="spanexpense">
23
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td id="sumExpenses"></td>
</tr>
</tfoot>
</table>
Fiddle https://jsfiddle.net/ey2gLp7t/

Sum total of all text box value in a row using jquery

I want to sum all the text box value in a html table row using jQuery.
here is the table:
<table border="1">
<tr>
<th>sl</th>
<th>TA</th>
<th>DA</th>
<th>HA</th>
<th>Total</th>
</tr>
<tr>
<td>1</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td><td>
<input id="expenses_sum"></td>
</tr>
<tr>
<td>2</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td><td>
<input id="expenses_sum"></td>
</tr>
<tr>
<td>3</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td><td>
<input id="expenses_sum"></td>
</tr>
</table>
Here is the jQuery function to add the value of all text box of class expenses and display the result in a text box of id expenses_sum.
$(document).ready(function() {
$(".expenses").each(function() {
$(this).keyup(function() {
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
$(".expenses").each(function() {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$("#expenses_sum").val(sum.toFixed(2));
}
how to use this function for each row.
Firstly you have repeated the same id when they should be unique which means your HTML is invalid. You should use a common class instead.
To make this work you need to restrict the .expenses selector to only find the elements within the same row as the input which was changed. To do that you can use closest() to get the nearest parent tr, then find() to get all the inputs.
Also note there are several logic improvements you can make here:
remove the each() loop to add the event handler
providing the reference of calculateSum to the event handler so you can use the this keyword to traverse the DOM
provide a default value of 0 to the value to simplify the sum logic
hook to the change event as well as keyup for when users paste data in to the field. Try this:
$(document).ready(function() {
$(".expenses").on('keyup change', calculateSum);
});
function calculateSum() {
var $input = $(this);
var $row = $input.closest('tr');
var sum = 0;
$row.find(".expenses").each(function() {
sum += parseFloat(this.value) || 0;
});
$row.find(".expenses_sum").val(sum.toFixed(2));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<th>sl</th>
<th>TA</th>
<th>DA</th>
<th>HA</th>
<th>Total</th>
</tr>
<tr>
<td>1</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses_sum"></td>
</tr>
<tr>
<td>2</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses_sum"></td>
</tr>
<tr>
<td>3</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses_sum"></td>
</tr>
</table>
you can use like this
$(document).on('keyup change','input.expenses',function(){
$expenses = $(this).parents('tr').find('.expenses');
$expenseTotal = $(this).parents('tr').find('#expenses_sum');
$expenseTotal.val('0');
$.each($expenses,function(index,object){
if($(object).val()!='')
{
$expenseTotal.val(parseInt($expenseTotal.val())+parseInt($(object).val()));
}
});
});
see demo at - https://jsfiddle.net/Vesharj/zLg3pyq4/
Here is the right way to do this.
<table border="1">
<tr>
<th>sl</th>
<th>TA</th>
<th>DA</th>
<th>HA</th>
<th>Total</th>
</tr>
<tr>
<td>1</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td><td>
<input class="expenses_sum"></td>
</tr>
<tr>
<td>2</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td><td>
<input class="expenses_sum"></td>
</tr>
<tr>
<td>3</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td><td>
<input class="expenses_sum"></td>
</tr>
</table>
And js :
$(document).ready(function(){
$(".expenses").each(function() {
$(this).keyup(function(){
sum($(this).parents("tr"));
});
});
});
function sum(parent){
var sum = 0;
$(parent).find(".expenses").each(function(){
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
$(parent).find(".expenses_sum").val(sum.toFixed(2));
}
Hope, it helps

per day plus one to a certain number

I am new to Js. I have a table that shows me 9 persons. I have added the number of days they are in the group. I am trying to create a function that counts per day +1 to this number. Has somebody an Idea how i can do that?
This is my Code:
<table style="width:100%">
<tr>
<th><input class="checkbox" type="checkbox"></th>
<th>Spieler</th>
<th>Rang</th>
<th>Tage</th>
</tr>
<tr>
<td><input class="checkbox" type="checkbox"></td>
<td>HELLFIRE944</td>
<td>Komandant</td>
<td>212</td>
</tr>
<tr>
<td><input class="checkbox" type="checkbox"></td>
<td>Backfischjoghurt</td>
<td>Ausführender Offizier</td>
<td>217</td>
</tr>
<tr>
<td><input class="checkbox" type="checkbox"></td>
<td>retoaba</td>
<td>Personaloffizier</td>
<td>210</td>
</tr>
<tr>
<td><input class="checkbox" type="checkbox"></td>
<td>chrisi_39</td>
<td>Rekrutierungsoffizier</td>
<td>210</td>
</tr>
<tr>
<td><input class="checkbox" type="checkbox"></td>
<td>salpo</td>
<td>Unteroffizier</td>
<td>212</td>
</tr>
<tr>
<td><input class="checkbox" type="checkbox"></td>
<td>Kaeltischerkriger</td>
<td>Unteroffizier</td>
<td>213</td>
</tr>
<tr>
<td><input class="checkbox" type="checkbox"></td>
<td>DnerYoo_sniper</td>
<td>Rekrut</td>
<td>39</td>
</tr>
<tr>
<td><input class="checkbox" type="checkbox"></td>
<td>panzerzockerundnoah</td>
<td>Rekrut</td>
<td>146</td>
</tr>
<tr>
<td><input class="checkbox" type="checkbox"></td>
<td>PanzaSintKuhlMinecraftLP</td>
<td>Rekrut</td>
<td>116</td>
</tr>
</table>
<footer class=footer>
<div class=footer>
<p class= footer-p>created by #Reto Keller</p>
</div>
</footer>
This will help you, it returns you the whole array of tableData values of Tage.
plunker link
function getAllTableDataValues() {
var row = $('table tr'); //get all table rows
var rowData = row.find('td:nth-child(4n)'); // get all the table data with Tage
var numberArray = [];
rowData.each(function() {
var value = $(this).html(); //get the value of td in string format array
value = Number(value);
value = value +1;
numberArray.push(value);
});
return numberArray;
}
getAllTableDataValues();

Get sum of a column in a table

Suppose i have the table below and i want to add the column Credits to get its sum
<table id="tbl_semester11">
<thead>
<tr>
<th>Semester 1</th>
</tr>
</thead>
<thead>
<tr>
<th>Module Code</th>
<th>Module Name</th>
<th>Credits</th>
<th>Module %</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>MGMT1101C</td>
<td>Management Seminar</td>
<td id="txtcredit112" class="sum">3</td>
<td><input type="number" id="txtpercentage112" min="40" max="100" onchange="process([1,1,2,5]);"></td>
<td id="txtgrade112">D</td>
</tr>
<tr class="alt">
<td>HCA1105C</td>
<td>Computer Architecture</td>
<td id="txtcredit113" class="sum">4</td>
<td><input type="number" id="txtpercentage113" min="40" max="100" onchange="process([1,1,3,5]);"></td>
<td id="txtgrade113">D</td>
</tr>
<tr>
<td>PROG1115C</td>
<td>Object Oriented Software Development I</td>
<td id="txtcredit114" class="sum">4</td>
<td><input type="number" id="txtpercentage114" min="40" max="100" onchange="process([1,1,4,5]);"></td>
<td id="txtgrade114">D</td>
</tr>
<tr class="alt">
<td>MATH1103C</td>
<td>Decision Mathematics</td>
<td id="txtcredit115" class="sum">3</td>
<td><input type="number" id="txtpercentage115" min="40" max="100" onchange="process([1,1,5,5]);"></td>
<td id="txtgrade115">D</td>
</tr>
<tr>
<td>ITE1107C</td>
<td>Language and Communication Seminar</td>
<td id="txtcredit116" class="sum">3</td>
<td><input type="number" id="txtpercentage116" min="40" max="100" onchange="process([1,1,6,5]);"></td>
<td id="txtgrade116">D</td>
</tr>
<tr class="al">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td bgcolor="#b3ffb3"><b>S.P.A</b></td>
<td bgcolor="#4dff4d" id="spa11">40.7</td>
</tr>
</tbody>
</table>
Here is my JS
function getsum(arr) {
var sum = 0;
var tbl_id = 'tbl_semester' + arr[0] + arr[1];
$('#' + tbl_id + '.sum').each(function () {
sum += +(this).text()||0;
});
return sum;
arr is the same parameter as process i.e [1,1,3,5].The problem is that sum always returns 0
Your selector is wrong. If you want to select children with the .sum class, you should add a space between parent and children. Your function should be:
function getsum(arr) {
var sum = 0;
var tbl_id = 'tbl_semester' + arr[0] + arr[1];
$('#' + tbl_id + ' .sum').each(function () {
sum += parseInt($(this).text())||0;
});
return sum;
}
Also, I used parseInt() because .text() returns a string. That way you are sure to have a NaN value or an actual integer.

Categories