Replacing text in table with an array using Jquery - javascript

I'm using Jquery V1.11.1 and I want to replace all of the TD elements in my HTML table from the third row from left. I'm using an array which values must be passed in each TD element of the table.
var numberArray = [0,1,2,3,4,5];
$.each(numberArray , function(index, value){
$("table tr td:nth-child(3)").html(value);
});
This returns in every TD element a 5. How can I make it like 1, 2, 3, 4, 5 per TD tag.

$("table tr td:nth-child(3)").each(function(index){
$(this).html(numberArray[index]);
});

Try this
var numberArray = [0,1,2,3,4,5];
$.each(numberArray , function(index, value){
$("table tr td:nth-child("+index+")").html(value);
});

Try this code if you want to update value of 3rd row with array
var numberArray = [0,1,2,3,4,5];
$.each(numberArray , function(index, value){
var td=value+1;
$("table tr:nth-child(3) td:nth-child("+td+")").html(value);
});
Updated DEMO

Try this:
var numberArray = [0,1,2,3,4,5];
$.each(numberArray , function(index, value){
$("table tr td:nth-child("+index+")").html(value);
});

Related

how to get the id of a tr inside the loop

hi i got the tr content like this way simil
var td = $("tr td"); // get first child of all the td elements
var htmlContent = []; // initilize an empty array
for (i = 0; i < td.length; i++) {
htmlContent[i] = $(td[i]).text();
trid[i] = $(td[i]).attr("id");
}
i want the tr id so i use this code
trid[i] = $(td[i]).attr("id");
but this is not good
You can use .parent() to get the tr, and then its id.
var htmlContent = []; // initilize an empty array
$('tr td').each(function () {
htmlContent.push($(this).text());
console.log($(this).parent().attr('id'));
});
Here is a simple fiddle: https://jsfiddle.net/hxsbLws2/1/
You should use td only since it is already a DOM object. You don't need to use it as a selector again like this $(td) ..
Then just specify the index td[i]
trid[i] = td[i].attr('id');

Selecting a table data using javascript/jquery

Hi i am new to javascript and jquery.I just like to know if there is any way of selecting a table data using this format:
$("#myTable").row[index1][index2];
where index1 is row index, index2 is column. Anything similar is fine too.
Try this : you can use .eq() in jQuery to traverse through tr and td with specified index
var td = $("#myTable").find('tr:eq('+index1+')').find('td:eq('+index2+')');
var data = $(td).text();// you can use .html() if you need html inside td
Try This:
$(function(){
$('input').click(function()
{
var t= $(this).attr('class');
var text= $('.time'+t).text();
alert(text);
});
$('td').click(function()
{
var index = this.cellIndex;
alert($('tr:first').find('td').eq(index).text());
});
});
http://jsfiddle.net/oL4pfgda/
It will iterate your table cells and print the values-
$("#myTable>tr>td").each(function () {
var cell_value = $(this).html();
alert(cell_value);
})

Using jQuery to remove all rows in a table after a specified row

I'd like to delete all rows in a table after row x where x is a number that switches up. The following does not work:
$("#comps-table tbody tr:gt(x)").remove();
Nor does:
$('#comps-table tbody tr').gt(x).remove();
x is a variable so you need to use string concatenation.
$("#comps-table tbody tr:gt(" + x + ")").remove();
or the preferred way is to use slice()
$('#comps-table tbody tr').slice(x).remove();
Try this:
var after = 5; // remove after row number 5
$('#comps-table tbody tr').each(function() {
var $row = $(this);
var rowNumber = $row.index();
if ( rowNumber >= after ) {
$row.remove();
}
});
Havent tested it but it should put you in the right direction

Get Sum of 2nd <td> in every <tr> in Table

I want to calculate the sum of the 2nd <td> item in each of the rows and sum the total into my div.
My JS is as follows
$('.table tbody tr:gt(0)').each(function () {
var mixTotal = parseInt($(this).find('td:nth(2)').html());
// Add total to div
$('.totals').text(mixTotal);
});
DEMO HERE http://jsfiddle.net/5pnMh/1/
My Html is a standard HTML table, which contains a thead tbody and tfoot.
I can't seem to get it to work. I can get each value but not sure how to add them.
Looking for some help
var mixTotal = 0;
$('tbody tr').each(function () {
mixTotal += parseInt($(this).find('td:eq(1)').text(),10);
});
$('.totals').html(mixTotal);
jsFiddle
Your last row of numbers will not be included in the TOTAL because it is a <tfoot>. Please also note that just because your first row is a <thead>, you may not leave out the <tr></tr> tags.
I think is better store the result in variable and after loop append it to div.
// Set global var
var mixTotal = 0;
$('.table tbody tr').each(function () {
// Just add the number
mixTotal = mixTotal+parseInt($(this).find('td:nth-child(2)').html());
});
// And finally, add total to div
$('.totals').text(mixTotal);
http://jsfiddle.net/5pnMh/3/
If you will replace :nth(2) to a :nth-child(2), your code may partly works.
If you're looking to sum the values in the second column, try this:
var mixTotal = 0;
$('.table tbody tr').add('.table tfoot tr').each(function () {
mixTotal += parseInt($(this).find('td:eq(1)').text(), 10);
});
$('.totals').text(mixTotal); // Add total to div
jsFiddle example
use this code if you got decimal numbers
var mixTotal = 0;
$('tbody tr').each(function () {
mixTotal += parseFloat($(this).find('td:eq(1)').text(),10);
});
$('.totals').html(mixTotal);
See Demo
var mixTotal = 0;
$('#your_table_id tbody tr').each(function () {
mixTotal = mixTotal + (isNaN(parseInt($(this).find('td:eq(1)').text(), 10)) ? 0 : parseInt($(this).find('td:eq(1)').text(),10))
});
$('.totals').html(mixTotal);
if u have both types of values like text or nan value

Getting third cell of each row

var Rows = $("#tableid tbody tr");
Rows.each(function(index, element) {
var thirdCell = $(this+":nth-child(3)").text();
alert(thirdCell);
});
Something in the var thirdCell line is not working correctly. Each row has four children, all td tags. I want to get the text inside the third cell.
Try something like below,
var Rows = $("#tableid tbody tr");
Rows.each(function(index, element) {
var thirdCell = $(this).find('td').eq(2).text();
alert(thirdCell);
});
this is not a string, it's a jquery object, so it can't be appended to when you are building your new selector. You could do it like this:
var selector = $(this).selector;
var thirdCell = $(selector+":nth-child(3)").text();
alert(thirdCell);
http://jsfiddle.net/2URV7/
This will not work because tr has no text. it has TDs. you can apply though html() to get the innerHTML of the tr, or use text() on tds if they actually contain text.
you can get all cells from each row by 0 based index
Rows.each(function(index, element) {
var thirdCell = $(this.cells[2]).text();
alert(thirdCell);
});
or you can get it in original selector
var Third = $("#tableid tbody tr > td:nth-child(3)");
Third.each(function(index, element) {
var thirdCell = $(this).text();
alert(thirdCell);
});

Categories