Adding the numbers in table row using jquery [duplicate] - javascript

This question already has answers here:
How to turn NaN from parseInt into 0 for an empty string?
(18 answers)
Closed 7 years ago.
I want to add the numbers in the table cell without getting NaN.
<table id="sample" border="1">
<tr>
<td>1</td>
<td>2</td>
<td>1</td>
<td></td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<td></td>
</tr>
</table>
Fiddle:
How it is possible?


Check this
$(document).ready(function() {
var colTotal=0;
var col=$("#sample tr td");
col.each(function() {
colData=parseInt($(this).text(), 10);
if (colData) {
colTotal+=parseInt(colData);
}
});
$('#sample tr:last td').text(colTotal);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="sample" border="1">
<tr>
<td>1</td>
<td>2</td>
<td>1</td>
<td></td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<td></td>
</tr>
</table>


use isNaN() function like:
$(document).ready(function() {
var colTotal=0;
var col=$("#sample tr td");
$(col).each(function()
{
colData=$(this).text();
colTotal+=isNaN(parseInt(colData)) ? 0: parseInt(colData);
});
$('#sample tr:last td').text(isNaN(colTotal) ? 0: colTotal);
});
DEMO


use $.isNumeric(colData)
updated your link


Just skip the blank values
$(document).ready(function() {
var colTotal=0;
$("#sample td").each(function()
{
if ($(this).text())
colTotal+=parseInt($(this).text());
});
$('#sample tr:last td').text(colTotal);
});

Related

when use JQuery clone() , why remove() not working [duplicate]

This question already has answers here:
.clone() and .remove() method in jquery
(2 answers)
Closed 1 year ago.
I use jquery clone() to copy table element , and I want to remove first td
there is my code , can any one help?
javascript
$.fn.hasAttr = function(name) {
return this.attr(name) !== undefined;
};
var arr_tr=new Array();
$('table tr').each(function(i){
arr_tr[i].push($(this).clone());
});
//for some reason I need use like below
for(var x in arr_tr){
for(var y in arr_tr[x]){
if(arr_tr[x][y].find('td:eq(0)').hasAttr('rowspan')){//if td has rowspan attribute
arr_tr[x][y].find('td:eq(0)').remove();//<== Why [<td rowspan=3>ABC</td>] can't remove
};
}
}
HTML
<table border=1 width='100%'>
<tr><td rowspan=3>ABC</td><td>A2</td><td>A3</td></tr>
<tr><td>B2</td><td>B3</td></tr>
<tr><td>C2</td><td>C3</td></tr>
</table>

You can simplify this down to just using an attribute selector:
const $clone = $('table').clone();
$clone.find('td:first-child[rowspan]').remove();
$('#res').append($clone)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border=1 width='100%'>
<tr>
<td rowspan=3>ABC</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B2</td>
<td>B3</td>
</tr>
<tr>
<td>C2</td>
<td>C3</td>
</tr>
<tr>
<td rowspan=2>CDE</td>
<td>C4</td>
<td>C5</td>
</tr>
<tr>
<td>C6</td>
<td>C7</td>
</tr>
</table>
<h3>Result</h3>
<div id="res"></div>

How to add any rows by clicking html table in jQuery [duplicate]

This question already has answers here:
Adding a table row in jQuery
(42 answers)
How can I clone a table row using jQuery?
(1 answer)
Closed 2 years ago.
I wonder whether I can insert rows in html talbe by clicking them.
For example when I prepare this table like below, and by clicking them
<table>
<tbody>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
My desired result is like this.
And I would like to know how to add any rows by clicking
<table>
<tbody>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
.
.
.
.
</tbody>
</table>
If someone has opinion, please let me know.
Thanks
table {
border-collapse:collapse;}
td {
border:solid black 1px;
transition-duration:0.5s;
padding: 5px}
<table>
<tbody>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>

You could do it like this:
$(document).ready(function() {
$("table").on( "click", "tr", function() {
$("table").append($(this).clone());
});
});
Note that it's necessary to pass the event from a parent element that's already there when the page is initially loaded - table - to all tr-elements using on().
jQuery on()

If you simply want to create new tr elements and add them to the table when it's clicked, you could simply create a click event handler to do so. For example:
// Store DOM elements in some variables
const [tbodyEl] = document.querySelector('table').children;
const [trEl] = tbodyEl.children;
// Create an event handler function
const sppendAdditionalRowToTable = e => {
const newTrEl = document.createElement('tr');
for (let i = 0; i < 3; i += 1) {
newTrEl.appendChild(document.createElement('td'));
}
tbodyEl.appendChild(newTrEl);
};
// Call handler function on click event
tbodyEl.addEventListener('click', sppendAdditionalRowToTable);
table {
border-collapse: collapse;
}
td {
border: solid black 1px;
transition-duration: 0.5s;
padding: 5px
}
<table>
<tbody>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>

This works:
$( document ).ready(function() {
$('#tableID').on( "click", "tr", function() {
$("tbody").append("<tr><td>0</td><td>1</td><td>2</td></tr>");
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableID">
<tbody>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>

Jquery select specific table cells and populate list

I need to select on the the first td (subject.key) in each table row and populate an array with the result.
The table I'm selecting from is generated dynamically using a foreach loop
var testArray = [];
$(function () {
$('#overview tr td').each(function (a) {
var value = $(this); //doesn't work
testArray.push( value );
});
console.log(JSON.stringify(testArray));
});
<table id="overview" class="table table-sm table-borderless">
#if (Model.programmeInformationViewModel.SubjectAreas != null)
{
#foreach (var subject in
Model.programmeInformationViewModel.SubjectAreas)
{
<tr><td Hidden="Hidden">#subject.Key</td>
<td>#subject.Value</td></tr>
}
}
</table>

To get the first td of each tr you can use :first-child and then use .text() to get the text in it.
var testArray = [];
$(function () {
$('#overview tr td:first-child').each(function () {
var value = $(this).text();
testArray.push( value );
});
console.log(testArray);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="overview">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>

You are pushing jQuery reference of the DOM element to the array so it won't work as you expected. If you want the text content then use text() method over the jQuery object.
$(function () {
$('#overview tr td').each(function (a) {
var value = $(this).text(); //doesn't work
testArray.push( value );
});
console.log(JSON.stringify(testArray));
});
var testArray = [];
$(function() {
$('#overview tr td').each(function(a) {
var value = $(this).text();
testArray.push(value);
});
console.log(JSON.stringify(testArray));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="overview">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
If you just want value from first td then use :first-child pseudo-class selector to get the first column.
$(function () {
$('#overview tr td:first-child').each(function (a) {
var value = $(this).text(); //doesn't work
testArray.push( value );
});
console.log(JSON.stringify(testArray));
});
var testArray = [];
$(function() {
$('#overview tr td:first-child').each(function(a) {
var value = $(this).text(); //doesn't work
testArray.push(value);
});
console.log(JSON.stringify(testArray));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="overview">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
Or you can use jQuery map() and get() method to get the array.
$(function () {
testArray = $('#overview tr td:first-child').map(function (a) {
return $(this).text();
}).get();
console.log(JSON.stringify(testArray));
});
var testArray = [];
$(function() {
testArray = $('#overview tr td').map(function(a) {
return $(this).text();
}).get();
console.log(JSON.stringify(testArray));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="overview">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>

universal javascript selector to interact on all html element

I started on that http://jsfiddle.net/DRFBG/
And if I add tables so mytable1, mytable2,...
<table id="mytable1" border="1">
<tr><th>Column1</th><th>Column2</th><th>Column3</th><th>Column4</th></tr>
<tr class="data"><td>1st</td><td>1.1</td><td></td><td>1</td></tr>
<tr class="data"><td>2nd</td><td>2.01</td><td></td><td>2</td></tr>
<tr class="data"><td>3rd</td><td>3.001</td><td></td><td>3</td></tr>
<tr class="data"><td>4th</td><td>4.01</td><td></td><td>4</td></tr>
</table>
<table id="mytable2" border="1">
<tr><th>Column1</th><th>Column2</th><th>Column3</th><th>Column4</th></tr>
<tr class="data"><td>1st</td><td>1.1</td><td>1</td><td></td></tr>
<tr class="data"><td>2nd</td><td>2.01</td><td>2</td><td></td></tr>
<tr class="data"><td>3rd</td><td>3.001</td><td>3</td><td></td></tr>
<tr class="data"><td>4th</td><td>4.01</td><td>4</td><td></td></tr>
</table>
How could I uniform my javascript code for all tables?
I've already tried passing by table[div^=mytable]*, but the problem is the second selector in the function.
So any ideas please? Thank you? Sorry for my english
By the way, the code is to remove th with empty td for each table
$('#mytable2 th').each(function(i) {
var remove = 0;
var tds = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')')
tds.each(function(j) { if (this.innerHTML == '') remove++; });
if (remove == ($('#mytable2 tr').length - 1)) {
$(this).hide();
tds.hide();
}
});

One approach is, selecting tables first and get their id and after that, doing the approach of http://jsfiddle.net/DRFBG/ on each of them like the following:
$('table').each(function()
{
var tb_id = $(this).attr('id');
$('#'+tb_id+' th').each(function(i) {
var remove = 0;
var tds = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')')
tds.each(function(j) { if (this.innerHTML == '') remove++; });
if (remove == ($('#'+tb_id+' tr').length - 1)) {
$(this).hide();
tds.hide();
}
});
});
Here is the working jsfiddle

To select all on your page you can use "table" selector.
So you'd need to use $('table2 th') instead of $('#mytable2 th')

One possible solution would be to loop through each column of each table, then check if there are any non-empty cells. If there is not, then you can safely remove() all the td and th within that column.
Note that the removal needs to be done last, otherwise it will affect the indexing of the following columns. You can do that by simply marking the cells to be removed with a class, and then selecting that class once all loops complete. Try this:
$('table').each(function() {
var $table = $(this);
var rows = $table.find('tr').length - 1; // -1 to account for the headings
$table.find('th').each(function(i, th) {
var $empty = $table.find(`td:nth-child(${i + 1}):empty`);
if ($empty.length == rows)
$empty.add(this).addClass('to-remove');
})
$table.find('.to-remove').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable1" border="1">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
<tr class="data">
<td>1st</td>
<td>1.1</td>
<td></td>
<td>1</td>
</tr>
<tr class="data">
<td>2nd</td>
<td>2.01</td>
<td></td>
<td>2</td>
</tr>
<tr class="data">
<td>3rd</td>
<td>3.001</td>
<td></td>
<td>3</td>
</tr>
<tr class="data">
<td>4th</td>
<td>4.01</td>
<td></td>
<td>4</td>
</tr>
</table>
<table id="mytable2" border="1">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
<tr class="data">
<td>1st</td>
<td>1.1</td>
<td>1</td>
<td></td>
</tr>
<tr class="data">
<td>2nd</td>
<td>2.01</td>
<td>2</td>
<td></td>
</tr>
<tr class="data">
<td>3rd</td>
<td>3.001</td>
<td>3</td>
<td></td>
</tr>
<tr class="data">
<td>4th</td>
<td>4.01</td>
<td>4</td>
<td></td>
</tr>
</table>

Get a value out of element with same variable class [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
Posted a similar question, but may be this case will make more sense. Got a table with many first td's of tr having a duplicate first td in a different tr. I'm using these for identification. I want to pull a value from 2nd tr and insert it into already appended(!) td in the first tr. Here is a quick html code example
<div class="tableclass">
<table>
<tbody>
<tr>
<td>id1</td>
<td>something else</td>
<td>1</td>
</tr>
<tr>
<td>id2</td>
<td>something else</td>
<td>2</td>
</tr>
<tr>
<td>id2</td>
<td>something else</td>
<td>3</td>
</tr>
<tr>
<td>id3</td>
<td>something else</td>
<td>4</td>
</tr>
<tr>
<td>id1</td>
<td>something else</td>
<td>5</td>
</tr>
<tbody>
</table>
<div>
And here is my jquery code
$(".tableclass table tbody tr").each(function(){
$(this).append('<td class="fbctr"></td>');
var trclass = $(this).find("td:first-child").html();
$(this).addClass(trclass);
// this is where I'm having a problem
var fbctr = $(this).parent().filter(trclass).eq(2).find("td:nth-child(3)");
$(this).find(".fbctr").html(fbctr);
});

OK, your problem is that jquery .filter() works on a set of given DOM elements. So you have to first select <tr> elements and then use .filter(). In your question you are applying it on your <table>
So, Your JavaScript code will be like this:
$(".tableclass table tbody tr").each(function(){
var trclass = $(this).find("td:first-child").html();
$(this).addClass(trclass);
var fbctr = $(this).parent().find('tr').filter('.'+trclass).eq(1).find("td:nth-child(3)").html();
if(typeof fbctr !== "undefined"){
console.log(fbctr);
$(this).find(".fbctr").html(fbctr);
}
});
Update(Corrected Code):
In case you want to copy the value of first occurring element into the second occurring element, use this code:
$(".tableclass table tbody tr").each(function(){
var trclass = $(this).find("td:first-child").html();
$(this).addClass(trclass);
var elements = $(this).parent().find('tr').filter('.'+trclass);
if(elements.length > 1){
var fbctr = elements.eq(0).find("td:nth-child(3)").html();
if(typeof fbctr !== "undefined")
$(this).find(".fbctr").html(fbctr);
}
});
And in case you want to copy the value of second occurring element into the first occurring element, use this code:
$(".tableclass table tbody tr").each(function(){
var trclass = $(this).find("td:first-child").html();
$(this).addClass(trclass);
var elements = $(this).parent().find('tr').filter('.'+trclass);
var fbctr = elements.eq(1).find("td:nth-child(3)").html();
if(typeof fbctr !== "undefined")
$('.'+trclass).not(this).find(".fbctr").html(fbctr);
});

You can filter out the duplicate rows first and remove all the duplicate rows but not first, then in the first rows append the 3rd td element of the last duplicate row.
In the below solution i am also removing the duplicate rows, you can keep/remove that based on your requirement.
Here is the working solution where i have added few extra node for testing of the solution.
var rows = $(".tableclass table tbody tr")
rows.each(function() {
var trclass = $(this).find("td:first-child").html();
$(this).addClass(trclass);
var dupeRows = rows.filter("." + trclass);
rows.filter("." + trclass).not(":first").remove();
if (dupeRows.length > 1) {
rows.filter("." + trclass).first().append('<td>' + $(dupeRows[dupeRows.length - 1]).find("td:nth-child(3)").html() + '</td>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tableclass">
<table>
<tbody>
<tr>
<td>id1</td>
<td>something else</td>
<td>1</td>
</tr>
<tr>
<td>id2</td>
<td>something else</td>
<td>2</td>
</tr>
<tr>
<td>id2</td>
<td>something else</td>
<td>3</td>
</tr>
<tr>
<td>id3</td>
<td>something else</td>
<td>4</td>
</tr>
<tr>
<td>id1</td>
<td>something else</td>
<td>5</td>
</tr>
<tr>
<td>id2</td>
<td>something else</td>
<td>5</td>
</tr>
<tr>
<td>id2</td>
<td>something else</td>
<td>8</td>
</tr>
<tbody>
</table>
<div>
;

Categories