We Keep Coding

Push values to array as separate key value pairs

I have a project where I'm adding values from an attribute (comma separated integers) on a particular cell in each row of a table to an array in JS.
I know that if I create an array called myArray, then use myArray.push(121840,121841); the myArray.length result would be 2. This is what I expected. I had assumed (incorrectly) that since the value of the numbers attribute was the same format, e.g.: numbers="121840,121841", then the result would be the same using myArray.push($(this).attr('numbers'));, but I was mistaken as the length of that array is 1, instead of 2.
See below an example of what I'm trying to do and the issue I'm encountering.
Given a table like this where I'm grabbing the values from the last cell's numbers attribute:
<table border="1" width="100%">
<tbody emp-id="02" class="" name="Steve Smith">
<tr>
<td colspan="4">Steve Smith</td>
</tr>
<tr>
<td></td>
<td>2</td>
<td></td>
<td class="total" numbers="121856,121860">2</td>
</tr>
</tbody>
<tbody emp-id="01" name="Marky Mark">
<tr>
<td colspan="4">Marky Mark</td>
</tr>
<tr>
<td>1</td>
<td></td>
<td>1</td>
<td class="total" numbers="121840,121841">2</td>
</tr>
</tbody>
</table>
My JS would is:
$('table tbody tr').each(function() {
$(this).find('td:last').each(function(){
if ($(this).attr('numbers')) {
numbers.push($(this).attr('numbers'));
names.push($(this).parents("tbody").attr('name'));
}
});
});
In the above example, the array has the correct number values stored, (121856,121860,121840,12184), but the length is given as 2 as each cell's values was added as a single element, such that number[0]=121856,121860, instead of 121856.
How would I correct this so that each integer within the attribute is added as a single element?
JSFiddle: http://jsfiddle.net/jacbhg0n/3/
Any help would be greatly appreciated.

You can simply achieve that by splitting the numbers attribute string by using String.split() method while pushing it into the numbers array.
Live Demo :
const numbers = [];
const names = [];
$('table tbody tr').each(function() {
$(this).find('td:last').each(function(){
if ($(this).attr('numbers')) {
numbers.push($(this).attr('numbers').split(','));
names.push($(this).parents("tbody").attr('name'));
}
});
});
console.log(numbers.flat());
<table border="1" width="100%">
<tbody emp-id="02" class="" name="Steve Smith">
<tr>
<td colspan="4">Steve Smith</td>
</tr>
<tr>
<td></td>
<td>2</td>
<td></td>
<td class="total" numbers="121856,121860">2</td>
</tr>
</tbody>
<tbody emp-id="01" name="Marky Mark">
<tr>
<td colspan="4">Marky Mark</td>
</tr>
<tr>
<td>1</td>
<td></td>
<td>1</td>
<td class="total" numbers="121840,121841">2</td>
</tr>
</tbody>
</table>

Get text of specific element by index

I want to get the text of the second to last table row, so I tried to do this:
var tradeNumEl = $("td.trade-num").length - 2;
console.log($("td.trade-num")[tradeNumEl].text())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="trade-num">100</td>
</tr>
<tr>
<td class="trade-num">101</td>
</tr>
<tr>
<td class="trade-num">102</td>
</tr>
<tr>
<td class="trade-num">103</td>
</tr>
<tr>
<td class="trade-num">104</td>
</tr>
<tr>
<td class="trade-num">105</td>
</tr>
</table>
However it gives me:
Uncaught TypeError: $(...)[tradeNumEl].text is not a function
How can I fix this? Here's the fiddle: https://jsfiddle.net/45a9sc6k/4/

Accessing a jQuery object by index returns the Element object at that index of the collection. It does not return a jQuery object - hence your error. To fix this, use eq() instead:
console.log($("td.trade-num").eq(tradeNumEl).text());
var tradeNumEl = $("td.trade-num").length - 2;
console.log($("td.trade-num").eq(tradeNumEl).text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="trade-num">100</td>
</tr>
<tr>
<td class="trade-num">101</td>
</tr>
<tr>
<td class="trade-num">102</td>
</tr>
<tr>
<td class="trade-num">103</td>
</tr>
<tr>
<td class="trade-num">104</td>
</tr>
<tr>
<td class="trade-num">105</td>
</tr>
</table>

You have to use eq() with index no as parameter. .eq(index) Reduce the set of matched elements to the one at the specified index.
var tradeNumEl = $("td.trade-num").length - 2;
console.log($("td.trade-num").eq(tradeNumEl).text() )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="trade-num">100</td>
</tr>
<tr>
<td class="trade-num">101</td>
</tr>
<tr>
<td class="trade-num">102</td>
</tr>
<tr>
<td class="trade-num">103</td>
</tr>
<tr>
<td class="trade-num">104</td>
</tr>
<tr>
<td class="trade-num">105</td>
</tr>
</table>

You also can create the object of the found element
///I want to get the text of the second to last table row using js and jquery. So I tried to do this:
var tradeNumEl = $("td.trade-num").length - 2;
console.log($($("td.trade-num")[tradeNumEl]).text(), tradeNumEl)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="trade-num">100</td>
</tr>
<tr>
<td class="trade-num">101</td>
</tr>
<tr>
<td class="trade-num">102</td>
</tr>
<tr>
<td class="trade-num">103</td>
</tr>
<tr>
<td class="trade-num">104</td>
</tr>
<tr>
<td class="trade-num">105</td>
</tr>
</table>

Calculating sum of td classes using js or jQuery

I have a dropdown select menu with various options (i.e. 5, 10, 15, 20...) that represents # of computers. The default select menu value is 5. I am using some js to multiply the dropdown selection by an amount (i.e. 10) and populates a table td with a class of .price-1. So, for example if the user leaves the default selection of 5, the calculated value of .price-1 is 50.
This is working fine. 
However, I then need to sum .price-1 with a few other <td> classes (i.e. .price-2, .price-3, .price-4...) to get a grand total in $ values that shows in #result.
How can I use js or jQuery to sum these td classes to get the grand total?
Below is my html of my table I need to sum.
<table id="tableOrderTotal" class="table tableTotal">
<tbody>
<tr>
<td>Item1</td>
<td class="price-1">calculated amount populated here</td>
</tr>
<tr>
<td>Item2</td>
<td class="price-2">calculated amount populated here</td>
</tr>
<tr>
<td>Item3</td>
<td class="price-3">13</td>
</tr>
<tr>
<td>Item3</td>
<td class="price-4">30</td>
</tr>
<tr class="summary">
<td class="totalOrder">Total:</td>
<td id="result" class="totalAmount"> </td>
</tr>
</tbody>
</table>

Get all td elements either using attribute value contains selector or by second td element of tr using :nth-child(). Now iterate over them using each() method and get sum using the text inside.
var sum = 0;
$('td[class*="price-"]').each(function() {
sum += Number($(this).text()) || 0;
});
$('#result').text(sum);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableOrderTotal" class="table tableTotal">
<tbody>
<tr>
<td>Item1</td>
<td class="price-1">calculated amount populated here</td>
</tr>
<tr>
<td>Item2</td>
<td class="price-2">calculated amount populated here</td>
</tr>
<tr>
<td>Item3</td>
<td class="price-3">13</td>
</tr>
<tr>
<td>Item3</td>
<td class="price-4">30</td>
</tr>
<tr class="summary">
<td class="totalOrder">Total:</td>
<td id="result" class="totalAmount"></td>
</tr>
</tbody>
</table>
With Array#reduce method as #rayon suggested.
$('#result').text([].reduce.call($('td[class*="price-"]'), function(sum, ele) {
return sum + (Number($(ele).text()) || 0);
}, 0));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableOrderTotal" class="table tableTotal">
<tbody>
<tr>
<td>Item1</td>
<td class="price-1">calculated amount populated here</td>
</tr>
<tr>
<td>Item2</td>
<td class="price-2">calculated amount populated here</td>
</tr>
<tr>
<td>Item3</td>
<td class="price-3">13</td>
</tr>
<tr>
<td>Item3</td>
<td class="price-4">30</td>
</tr>
<tr class="summary">
<td class="totalOrder">Total:</td>
<td id="result" class="totalAmount"></td>
</tr>
</tbody>
</table>

jQuery Object has a direct attribute referring to the number of the matched elements.
var sum = $('td[class*="price-"]').length;
$('#result').text(sum);

Removing elements by ID

I have a table with the following structure:
<table>
<tr>
<td>some column|1</td>
<td id="abc|1">abc</td>
<td id="abc|1">abc</td>
</tr>
<tr>
<td>another column|1</td>
<td id="def|1">def</td>
<td id="def|1">def</td>
</tr>
<tr>
<td>ome column|2</td>
<td id="abc|2">abc</td>
<td id="abc|2">abc</td>
</tr>
<tr>
<td>another column|2</td>
<td id="def|2">def</td>
<td id="def|2">def</td>
</tr>
</table>
The content comes from a database.
As you can see, the IDs have the suffix |x. I want to remove all elements with the suffix |2 in the 2nd column and all elements with the suffix |1 in the 3rd column.
Also the 3rd column should be shifted to the top, and all rows ending with |2 in the 1st column should disappear.
So that the final result looks like that:
<table>
<tr>
<td>some column|1</td>
<td id="abc|1">abc</td>
<td id="abc|2">abc</td>
</tr>
<tr>
<td>another column|1</td>
<td id="def|1">def</td>
<td id="def|2">def</td>
</tr>
</table>
This is my approach, but it doesn't work at all:
$("table td:nth-child(2)").find("[id$=2]").each(function() {
$(this).hide();
});
$("table td:nth-child(3)").find("[id$=1]").each(function() {
$(this).hide();
});
Here is the fiddle.

ID should be unique. It's better if you can change the HTML and make IDs unique.
IF CHANGING HTML IS NOT POSSIBLE
As both the selector are pointing to same element, use following
$("table td:nth-child(2)[id$=2], table td:nth-child(3)[id$=1]").hide();
Demo

Trying to replace innerhtml of row with responseText

I have the following table in my HTML body:
<table>
<tr id="0">
<td></td>
<td></td>
<td></td>
</tr>
<tr id="1">
<td></td>
<td></td>
<td></td>
</tr>
</table>
My httpRequest.responseText returns the following:
<td class="c1">c<td>
<td class="c1">a<td>
<td class="c1">t<td>
I want to replace the row where id="1" with the results from http.responseText and so I try to do the following:
var curr_row = document.getElementById("1");
curr_row.innerHTML = httpRequest.responseText;
However, this results in:
<table>
<tr id="0">
<td></td>
<td></td>
<td></td>
</tr>
<tr id="1">
<td class="c1">h</td>
<td></td>
<td class="c1">e</td>
<td></td>
<td class="c1">l</td>
<td></td>
</tr>
</table>
The above returns a row with what seems to be the original empty cells along with the new cells I want. Why is this occurring? I want the httpRequest.responseText cells to completely replace the original cells.

It is probably because your responsetext is not having closing tags
Change
<td class="c1">c<td>
<td class="c1">a<td>
<td class="c1">t<td>
To
<td class="c1">c</td>
<td class="c1">a</td>
<td class="c1">t</td>
From where you are getting it in the backend!