We Keep Coding

how to attempt null.value in document.getelementById

I have a table where it has dynamic rows and I need to get the data and make calculations on it so I get the total number of rows in Javascript and run a loop in it. my table looks like this
<table id='mytable1'>
<tr>
<td id="name_1">Precious Metals</td>
<td id="price_1">500</td>
<td id="qty_1">10</td>
</tr>
<tr>
<td id="name_2">Non Precious Metals</td>
<td id="price_2">200</td>
<td id="qty_2">5</td>
</tr>
<tr>
<td id="name_3">Gemstones</td>
<td id="price_3">300</td>
<td id="qty_3">10</td>
</tr>
and my javascript looks like this
<script>
var counter = $('#mytable1 tr').length;
for (i = 1; i <= counter; i++) {
var price = document.getElementById('price_'+i).value;
var qty= document.getElementById('qty'+i).value;
var price_calc = price * qty;
var total_price = total_price + price_calc;
}
</script>
The problem is that if there is one row missed, I mean Admin delete the row #2 and now there will be two rows and when the loop runs and it did not find the row#2 then it throws the error. Please help me or guide me about how should I go with this problem

You can simplify your HTML and make the calculations independent of the number of rows you have in the table. On top of that, jQuery is not necessary.
Documentation in the source.
const table = document.getElementById("mytable1");
// Put all existing rows inside the table in an array
const rows = [...table.getElementsByTagName("tr")];
// Loop through all rows
rows.map( row => {
// Price is in the first cell
const price = parseInt(row.cells[1].innerHTML);
// Quantity is in the second cell
const quantity = parseInt(row.cells[2].innerHTML);
// Calculate total value for each row
const total_price = price * quantity;
console.log(total_price);
});
<table id='mytable1'>
<tr>
<td>Precious Metals</td>
<td>500</td>
<td>10</td>
</tr>
<tr>
<td>Non Precious Metals</td>
<td>200</td>
<td>5</td>
</tr>
<tr>
<td>Gemstones</td>
<td>300</td>
<td>10</td>
</tr>
</table>

display correct age depending on date value

I have a table which have a tbody and x number of rows containing persons and their ages like this..
<tbody>
<tr>
<td class="number">4</td>
<td class="name">Name</td>
<td class="age" data-date="2004-11-22 00:00:00">13</td>
</tr>
<tr>
<td class="number">5</td>
<td class="name">Name</td>
<td class="age" data-date="2003-11-22 00:00:00">14</td>
</tr>
I would like to display the correct age of all persons, but since this depends on the current date I'm thinking of entering the birthdate instead. But I still want to display the actual age of the player. How can I use a jQuery script that iterate all rows of the table and depending on the data-date value display the actual age in the corresponding td cell?

$('.age').each(function(i, e) {
var now = new Date();
var date = new Date(e.dataset.date);
$(this).html(now.getFullYear() - date.getFullYear());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="number">4</td>
<td class="name">Name</td>
<td class="age" data-date="2004-11-22 00:00:00"></td>
</tr>
<tr>
<td class="number">5</td>
<td class="name">Name</td>
<td class="age" data-date="2003-11-22 00:00:00"></td>
</tr>
</tbody>
</table>

Maybe something like this:
function getAge(dateString) {
var today = new Date();
var birthDate = new Date(dateString);
var age = today.getFullYear() - birthDate.getFullYear();
var m = today.getMonth() - birthDate.getMonth();
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
return age;
}
$('.age').each(function(index){
$(this).html(getAge($(this).data('date')));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="number">4</td>
<td class="name">Name</td>
<td class="age" data-date="2004-11-22 00:00:00">13</td>
</tr>
<tr>
<td class="number">5</td>
<td class="name">Name</td>
<td class="age" data-date="2003-11-22 00:00:00">14</td>
</tr>
</tbody>
</table>
the getAge() function is stolen from here: https://stackoverflow.com/a/7091965/2008111 so maybe you follow that link and upvote also the answer there.

Your HTML page should be like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="persons">
<tbody>
<tr>
<td class="number">4</td>
<td class="name">Name</td>
<td class="age" data-date="2004-11-22 00:00:00"></td>
</tr>
<tr>
<td class="number">5</td>
<td class="name">Name</td>
<td class="age" data-date="2003-11-22 00:00:00"></td>
</tr>
</tbody>
</table>
The js side should look like this:
$(document).ready(function(){
$('.persons td.age').each(fucntion(){
var today = new Date();
var birthday = new Date($(this).attr('data-date'));
var ageDifMs = today - birthday.getTime();
var ageDate = new Date(ageDifMs);
$(this).html(Math.abs(ageDate.getUTCFullYear() - 1970));
});
});

Sum of values in html table row

I have this HTML table
Now I want to display sum of hours to the last column.
I tried like this, its not worked for me.
HTML
<table class='Table'>
<tr><td><span class='hours'>8:16</span></td><td><span class='hours'>8:27</span></td><td><span class='hours'>7:30</span></td><td>Print Sum of duration of this Row</td></tr>
<tr><td><span class='hours'>6:53</span></td><td><span class='hours'>8:02</span></td><td><span class='hours'>8:17</span></td><td>Print Sum of duration of this Row</td></tr>
<tr><td><span class='hours'>8:09</span></td><td><span class='hours'>8:28</span></td><td><span class='hours'>8:42</span></td><td>Print Sum of duration of this Row</td></tr>
</table>
Jquery
$(".Table tr td .hours").each(function(){
vals1=$(this).html()
console.log(vals1)
$(this).parent().parent().parent().find("td:last").html(vals1)
})
From the above code I am unable to determine end of row(TR).
Would be helpful if any suggestion to find sum of duration.

You can iterate over each tr and find the sum of the fields like
$(".Table tr:has(.hours)").each(function() {
var sum = 0;
$(this).find('td .hours').each(function() {
var parts = $(this).text().split(':')
sum += (parts[0] * 60 || 0) + (+parts[1] || 0);
});
var mins = Math.floor(sum / 60);
var sec = sum % 60;
$(this).find("td:last").html(mins + ':' + ('0' + sec).slice(-2))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='Table'>
<tr>
<td><span class='hours'>8:16</span>
</td>
<td><span class='hours'>8:27</span>
</td>
<td><span class='hours'>7:30</span>
</td>
<td>Print Sum of duration of this Row</td>
</tr>
<tr>
<td><span class='hours'>6:53</span>
</td>
<td><span class='hours'>8:02</span>
</td>
<td><span class='hours'>8:17</span>
</td>
<td>Print Sum of duration of this Row</td>
</tr>
<tr>
<td><span class='hours'>8:09</span>
</td>
<td><span class='hours'>8:28</span>
</td>
<td><span class='hours'>8:42</span>
</td>
<td>Print Sum of duration of this Row</td>
</tr>
</table>

How to multiply the contents of table cells via js?

I want to multiply cells content (only numbers) and using javascript.
The result is to be displayed in cell X
<script type="text/javascript">
function zmiana(){
var x = document.getElementById("rowstawka");
x.getElementsByTagName('td')[1].innerHTML=document.getElementById('Stawka2').value;
var y = document.getElementById("rowgodziny");
y.getElementsByTagName('td')[1].innerHTML=document.getElementById('Godziny').value;
}
</script>
I'm using the above script to add content to cells in a table.
And here is the table:
<table id="tabela">
<tr id="rowstawka">
<td>Stawka</td>
<td>12</td>
</tr>
<tr id="rowgodziny">
<td>Godziny</td>
<td>50</td>
</tr>
<tr id="rowPensja">
<td>Pensja</td>
<td>-</td>
</tr>
<tr id="rowNetto">
<td>Pensja Netto</td>
<td>x</td>
</tr>
</table>

If you can change the html, try using classes to determine which cells contains a number to be calculated:
<table id="tabela">
<tr id="rowstawka">
<td>Stawka</td>
<td class="num">12</td>
</tr>
<tr id="rowgodziny">
<td>Godziny</td>
<td class="num">50</td>
</tr>
<tr id="rowPensja">
<td>Pensja</td>
<td>-</td>
</tr>
<tr id="rowNetto">
<td>Pensja Netto</td>
<td id="result">x</td>
</tr>
</table>
Then use this simple snippet to make the magic:
var numbers = document.querySelectorAll(".num");
var total = 1;
for (var i = 0; i < numbers.length; i++)
{
total*= Number(numbers[i].innerText);
}
document.getElementById("result").innerText = total;
Fiddle

How to extract text inside nested HTML using JQuery?

I have here HTML Code:
<div class="actResult" style="border: solid">
<table>
<tbody>
<tr>
<td>Order Number</td>
<td>1</td>
</tr>
<tr>
<td>Customer Number</td>
<td>3</td>
</tr>
<tr>
<td>Complaint Code</td>
<td>b</td>
</tr>
<tr>
<td>Receivable Receipt Number</td>
<td>5</td>
</tr>
<tr>
<td>Date Called</td>
<td>2014-03-19</td>
</tr>
<tr>
<td>Scheduled Day Of Checkup</td>
<td>2014-03-19</td>
</tr>
<tr>
<td>Scheduled Day Of Service</td>
<td>2014-03-21</td>
</tr>
<tr>
<td>Checkup Status</td>
<td>Y</td>
</tr>
<tr>
<td>Service Status</td>
<td>N</td>
</tr>
<tr>
<td>Technician Number Checkup</td>
<td>3</td>
</tr>
<tr>
<td>Technician Number Service</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
I want to get the values of the tags and put them into an array with the a structure like array("first td" => "second td"), so for this case the array would be array("Order Number" => "1", "Customer Number" => "3", "Complaint Code" => "b", ...) and so on.
After that, the final array would be sent into a PHP code.
I've been trying to extract some of the values from the HTML using var html = $(this).filter(function( index ){ return $("td", this) }).filter(":odd").text(); and various other combinations of filter(), but it doesn't seem to work for me.
How do I go about doing what I want to do?

jsFiddle Demo
You are going to want to use .each for that and iterate through the rows in the table. For each row, take the first cell (.eq(0)) as the key, and the second cell (.eq(1)) as the value. Place these in a result object.
//object to hold resulting data
var result = {};
//iterate through rows
$('.actResult tr').each(function(){
//get collection of cells
var $tds = $(this).find('td');
//set the key in result to the first cell, and the value to the second cell
result[$tds.eq(0).html()] = $tds.eq(1).text();
});

You can get the rows property of the table element and create an object based on the cells' value:
var rows = document.querySelector('.actResult table').rows,
data = {}, c, l = rows.length, i = 0;
for (; i < l; i++) {
c = rows[i].cells;
data[c[0].innerHTML] = c[1].innerHTML;
}
http://jsfiddle.net/tG8F6/