JavaScript sum table value - javascript

I have the HTML table below. How can I sum up all of the columns based on continent group?
<html>
<table border="1">
<tr>
<th>Continent</th>
<th>Population</th>
</tr>
<tr>
<td>
<center>Total</center>
</td>
<td>
<center>sum(continent)???</center>
</td>
</tr>
<tr>
<td>
<center>Asia</center>
</td>
<td>
<center>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;">IND</font>
</td>
<td>
<font style="float:right;">900,000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">JPY</font>
</td>
<td>
<font style="float:right;">25,000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">CHN</font>
</td>
<td>
<font style="float:right;">9,000</font>
</td>
</tr>
<tr>
<td>
<center>Europe</center>
</td>
<td>
<center>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;">RUS</font>
</td>
<td>
<font style="float:right;">3,000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">ITA</font>
</td>
<td>
<font style="float:right;">5,000</font>
</td>
</tr>
<tr>
<td>
<center>Others</center>
</td>
<td>
<center>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;">OTH</font>
</td>
<td>
<font style="float:right;">90,000</font>
</td>
</tr>
</table>
</html>
Example: in order to get the Total, I need to add all of the continents, in this case Asia + Europe + Others, but first I need to have the subtotal of those continents. Additional info: Those continents and nations can be editable(add/remove) based on database. How can I do that?
In simple terms, like using Microsoft Excel, where we can sum up each/any column that we want.
I know JavaScript sum() that I got from other sites, but so far it only gives me the total for all column values. Below is the code, where index equals to number of column.
function sumColumn(index) {
var total = 0;
$("td:nth-child(" + index + ")").each(function() {
total += parseFloat($(this).text(), 10) || 0;
});
return total.toFixed(2);
}


If you're trying to learn on how to use Jquery Selectors, I've modified the snippet according to what you have mentioned. However, what you are trying to do here is a bad way of handling data. You should never represent data in this form. Use PHP or ajax to load data to the elements.
$(function() {
let asia_sum = 0;
$('.asia').each( function() {asia_sum+= parseInt($(this).text()); });
let eur_sum = 0;
$('.eur').each( function() {eur_sum+= parseInt($(this).text()); });
let other_sum = 0;
$('.other').each( function() {other_sum+= parseInt($(this).text()); });
let total = asia_sum + eur_sum + other_sum;
$('#total').text(total);
$('#eur').text(eur_sum);
$('#asia').text(asia_sum);
$('#other').text(other_sum);
console.log(other_sum);
});
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>
<body>
<table border="1">
<tr>
<th>Continent</th>
<th>Population</th>
</tr>
<tr>
<td>
<center>Total</center>
</td>
<td>
<center id='total'>sum(continent)???</center>
</td>
</tr>
<tr>
<td>
<center >Asia</center>
</td>
<td>
<center id='asia'>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;" >IND</font>
</td>
<td>
<font style="float:right;" class='asia'>900000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">JPY</font>
</td>
<td>
<font style="float:right;" class='asia'>25000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;" >CHN</font>
</td>
<td>
<font style="float:right;" class='asia'>9000</font>
</td>
</tr>
<tr>
<td>
<center>Europe</center>
</td>
<td>
<center id='eur'>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;" >RUS</font>
</td>
<td>
<font style="float:right;" class='eur'>3000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">ITA</font>
</td>
<td>
<font style="float:right;" class='eur'>5000</font>
</td>
</tr>
<tr>
<td>
<center>Others</center>
</td>
<td>
<center id='other'>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;" >OTH</font>
</td>
<td>
<font style="float:right;" class='other'>90000</font>
</td>
</tr>
</table>
</body>
</html>

Related

tbody focus does not work

I have the following table structure:
<table>
<tr>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tbody id="page-1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
<tbody id="page-2">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
I have tried the following jquery code to make scroll to specific tbody by id like:
page = 1;
$("#page-"+page).focus()
The above code failed to make scroll to the specified tbody. I also tried the following in order to get first tr but also failed:
page = 1;
$("#page-"+page+":first-child").focus()
The last thing that I have to mention, that tbody is loaded via ajax request and console.log($("#page-"+page).html()) works fine and prints out the html of the tbody

I have got the mistake. focus is not the suitable event for tbody in other words there is no point of focus for it. The solution is Run ScrollTop with offset of element by ID and using:
$('html, body').animate({
scrollTop: $('#page-'+page).offset().top -100
}, 2000);

not able to see view on the web browser?

I have a page where a have a html table and I am using java script and ajax for calling a controller action-"Task" with passing a model on clicking a row of this html table. i am getting this model values in my task action.
In task action I am redirect it to another controller action. The other controller action is BOMItemCost and my view is BOMItemCost.cshtml.
I have debugged it my debugger is going to the view but finally I do not get my view on my web browser.
Html table and javascript code:
<table class="TableID2" id="tblTask">
<thead>
<tr>
<th>Task Id</th>
<th>Task</th>
<th>Raised</th>
<th>Department</th>
<th>Raised On</th>
<th>Status</th>
</tr>
</thead>
<tbody><tr>
<td>1</td>
<td>1</td>
<td>Rahul</td>
<td>Marketing</td>
<td>28/06/2016 00:00:00</td>
<td>False</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
<td>jitender</td>
<td>Marketing</td>
<td>30/06/2016 00:00:00</td>
<td>False</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
<td>Jitender Singh</td>
<td>Marketing</td>
<td>07/02/2016 16:23:10</td>
<td>False</td>
</tr>
<tr>
<td>6</td>
<td>1</td>
<td>Jitender Singh</td>
<td>Marketing</td>
<td>07/04/2016 02:56:00</td>
<td>False</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
taskdetail = [];
$("#tblTask tr").click(function (tr) {
debugger;
var tableData = $(this).children("td").map(function () {
return $(this).text();
}).get();
taskdetail.push({
taskid: tableData[0],
tasktype: tableData[1],
assignby: tableData[2],
department: tableData[3],
assignon: tableData[4],
status: tableData[5],
});
debugger;
var model = {
taskdetail: taskdetail
};
$.ajax({
url:'#Url.Action("Task", "Job")',
type: "POST",
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({ data: model }),
dataType:'json',
success: function (data) {
alert('Document Saved.');
}
});
});
"Task" action in JobController is
[HttpPost]
public ActionResult Task(JobModel data)
{
List<TaskDTO> listoftaskdetail = new List<TaskDTO>();
listoftaskdetail = data.taskdetail.ToList();
return RedirectToAction("BOMItemCost", "Tasks", listoftaskdetail);
}
And "BOMItemCost" action in TasksController is
[HttpGet]
public ActionResult BOMItemCost(List<TaskDTO> listoftaskdetail)
{
return this.View();
}
and BOMItemCost.cshtml is
<div id="container">
<div class="wrapper white-bg">
<div class="col s12 m12 l12">
<div class="border-light pad-md">
<div class="heading24">BOM for Bidding</div>
<form>
<input type="hidden" name="hiddenField" />
<div class="table_h1">
<table id="TableID1">
<thead>
<tr>
<th>Sr. No.</th>
<th>Item Code</th>
<th>Description</th>
<th>Qty Per Unit</th>
<th width="10%">Price</th>
<th>Total</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>11234</td>
<td>Cap Capacitor</td>
<td>50</td>
<td class="editbox">400</td>
<td> </td>
</tr>
<tr>
<td>1</td>
<td>11234</td>
<td>Cap Capacitor</td>
<td>50</td>
<td class="editbox">400</td>
<td> </td>
</tr>
<tr>
<td>1</td>
<td>11234</td>
<td>Cap Capacitor</td>
<td>50</td>
<td class="editbox">400</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
#Html.TextArea("anshul")
</div>
<div class="clearfix"></div>
<div class="mar-sm-t pull-right">
<button class="btn waves-effect waves-light" type="submit" name="action">CANCEL</button>
<button class="btn waves-effect waves-light" type="submit" name="action">SEND TO MARKETING</button>
</div>
</form>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
I have debugged it. My compiler has gone through my view, but I am not able to see my view on my web browser.

Since you are calling your action from jquery ,so the result will always get back to the jquery method only..
So actually the "data" is your "BOMItemCost.cshtml", once you get data , you can append that somewhere in the page , where you want to show the new View..
$.ajax({
url:'#Url.Action("Task", "Job")',
type: "POST",
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({ data: model }),
dataType:'json',
success: function (data) {
//BOMItemCost.cshtml is coming in data
//So bind data inside some div
$('#divResult').append(data);
alert('Document Saved.');
}
});

how to redesign all table td in tr rows

I have table like this:
<table>
<tr>
<td> A-1 </td>
<td> A-2 </td>
<td> A-3 </td>
<td> A-4 </td>
<td> A-5 </td>
<td> A-6 </td>
<td> A-7 </td>
<td> A-8 </td>
</tr>
<tr>
<td> B-1 </td>
<td> B-2 </td>
<td> B-3 </td>
<td> B-4 </td>
<td> B-5 </td>
<td> B-6 </td>
<td colspan=2> B-7 </td>
</tr> </table>
it's something like this:
A-1 A-2 A-3 A-4 A-5 A-6 A-7 A-8
B-1 B-2 B-3 B-4 B-5 B-6 B-8
During some change on page size i want to change that table to be like following table design:
<table>
<tr>
<td> A-1 </td>
<td> A-2 </td>
</tr>
<tr>
<td> A-3 </td>
<td> A-4 </td>
</tr>
<tr>
<td> A-5 </td>
<td> A-6 </td>
</tr>
<tr>
<td> A-7 </td>
<td> A-8 </td>
</tr>
<tr>
<td> B-1 </td>
<td> B-2 </td>
</tr>
<tr>
<td> B-3 </td>
<td> B-4 </td>
</tr>
<tr>
<td> B-5 </td>
<td> B-6 </td>
</tr>
<tr>
<td colspan=2> B-7 </td>
</tr> </table>
It's something like this:
A-1 A-2
A-3 A-4
A-5 A-6
..
B-7
I'm not sure if that can be done with css or javascript.

Use .querySelectorAll("#table1 td") to select all td, then use [].forEach.call, this way you can loop through a Element List, and buld the new table.
var x = document.querySelectorAll("#table1 td");
var _html = "<table>";
[].forEach.call(x, function(el, i) {
if(i%2==0) _html += "<tr>";
_html += el.outerHTML;
if(i%2==1) _html += "</tr>";
});
_html += "</table>";
alert(_html);
document.write(_html);
<table id="table1">
<tr>
<td>A-1</td>
<td>A-2</td>
<td>A-3</td>
<td>A-4</td>
<td>A-5</td>
<td>A-6</td>
<td>A-7</td>
<td>A-8</td>
</tr>
<tr>
<td>B-1</td>
<td>B-2</td>
<td>B-3</td>
<td>B-4</td>
<td>B-5</td>
<td>B-6</td>
<td>B-7</td>
<td>B-8</td>
</tr>

How to create HTML table with jQuery and multiplication rows and columns

I need to create HTML table using jQuery dynamically and also I need to make multiplication between rows and columns. My rows is yield and column is price. I have two variables a and b.
var a; //represent price
var b; // represent yield
Now I need to create table and multiplication like this:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th rowspan="2" scope="col">Yield</th>
<th colspan="7" scope="col">Price</th>
</tr>
<tr>
<td>a-1.5</td>
<td>a-1</td>
<td>a-0.5</td>
<td>a</td>
<td>a+0.5</td>
<td>a+1</td>
<td>a+1.5</td>
</tr>
<tr>
<th scope="row">b-500</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b-400</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b-300</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b-200</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b-100</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b</th>
<td> </td>
<td> </td>
<td> </td>
<td>a*b</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+100</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+200</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+300</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+400</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+500</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<p> </p>
http://jsfiddle.net/nexetdad/
So columns is based on price +/- and rows are based on yield +/-. How I can create with JavaScript table matrix so every cell need to be calculated (a*b)?
Please give me some ideas. I don't know where to start.

I think you are lack of DOM skill.
You can refer it.
<head>
<script type="text/javascript">
function addlabel(s,n){
if (n > 0){
return s + "+" + String(n);
}
else if (n < 0){
return s + String(n);
}
else{
return s;
}
}
function multiplicationTable(){
x = document.getElementById("i1").value;
x = parseInt(x);
y = document.getElementById("i2").value;
y = parseInt(y);
var table = '<table border="1px"><thead>';
table += '<tr><th></th>'
for (var a = -1.5; a<= 1.5 ; a+=0.5){
table += '<th>'+ addlabel("a", a) +'</th>';
}
table += '</tr></thead><tbody>'
// add num
for (var b = y-500, ob = y; b<= y+500 ; b+=100){
table += "<tr>";
table += "<td>" + addlabel("b",b-ob) + "</td>"
for (var a = x-1.5; a<= x+1.5 ; a+=0.5){
table += '<td>'+ a*b +'</td>';
}
table += "</tr>";
}
return table + '</tbody></table>';
}
function build(){
document.getElementById('here').innerHTML = multiplicationTable();
}
</script>
</head>
<body>
<form name="f">
<input type="text" value ="15" name="r" id="i1">
<input type="text" value ="5000" name="c" id="i2">
<input type="button" value="make table" onclick="build()">
</form>
<div id="here">
</div>
</body>
https://jsfiddle.net/tonypythoneer/z5reeomj/2/

Although i dont know much about js and jquery you can mix them and this could be done. Go for nested for loop for creating your table and use append() of jquery for appending the content of table and simple multiplication.
By the way this can done easily using php.

RegEx to convert double quotes to single at the beginning and at the end

i have a variable which stores the whole html content like :-
getcontent ="<table style="height: 1000px; ; width: 500px;" border="1"> <tbody> <tr> <td>[<span>Assignment(for) name</span>]</td> <td>[<span>Total No of staff-months of the assignment</span>]</td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </tbody> </table> "
now i want to convert the frst and the end double quote with single quote.
what regex can be used so that the getcontent converts to :-
'<table style="height: 1000px; ; width: 500px;" border="1"> <tbody> <tr> <td>[<span>Assignment(for) name</span>]</td> <td>[<span>Total No of staff-months of the assignment</span>]</td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </tbody> </table> '

Use anchors for the beginning and end of the string:
getcontent = getcontent.replace(/(^"|"$)/g, "'");
^ represents the beginning of the string and $ the end.
This assumes that you actually have a string that contains a beginning end ending ", not a string that is (syntactically) enclosed in ", in which case your input is not valid, due to unescaped " within the string.

Categories