Discovering data in individual tr elements within a table with jQuery by utilizing .text()

Question

Discovering data in individual tr elements within a table with jQuery by utilizing .text()

I'm currently working on a project where I need to separate the three table rows within a dynamically generated table. My goal is to have jQuery treat each row individually in order to extract specific values like price and SKU. You can see an example of what I'm trying to achieve in the fiddle link provided below.

Since all the rows have the same classes for each product, my approach involves defining each tr as a unique variant. From there, I can search through them using .text() to retrieve the desired values.

Here's a snippet of the code (jsfiddle link included):

jQuery:


        var firstprice = $('#checkout .orderitems table.wizrtable tbody tr td.priceeach').text().replace(/\u00A3/g, '');
        // Price of a single product in checkout

        var amountofproducts = $('#checkout .wizrtable tbody tr').length;
        // Number of table rows in the checkout structure

        $(document).ready(function () {
            if (+amountofproducts >= 4 && +amountofproducts <= 8) {
                // Define unit price
                var firstrow = $('.wizrtable').closest('table').children('tr:first');
                var firstprice = $(firstrow.find('#checkout .orderitems table.wizrtable tbody tr td.priceeach')).text().replace(/\u00A3/g, '');
                
                var secondrow = $('.wizrtable').closest('table').children('tr:eq(1)');
                var secondprice = $(secondrow.find('#checkout .orderitems table.wizrtable tbody tr td.priceeach')).text().replace(/\u00A3/g, '');

                var thirdrow = $('.wizrtable').closest('table').children('tr:eq(2)');
                var thirdprice = $(thirdrow.find('#checkout .orderitems table.wizrtable tbody tr td.priceeach')).text().replace(/\u00A3/g, '');

                // Define item IDs for each product
                var firstSKU = $(firstrow.find('#checkout .orderitems table.wizrtable tbody .name .sku')).text().replace("Product Code: ", "");
                var secondSKU = $(secondrow.find('#checkout .orderitems table.wizrtable tbody .name .sku')).text().replace("Product Code: ", "");
                var thirdSKU = $(thirdrow.find('#checkout .orderitems table.wizrtable tbody .name .sku')).text().replace("Product Code: ", "");

                // Inject html div with result
                var Firstprodprice = jQuery("FirstprodPrice").text(firstprice);
            }
        });

JS Fiddle Link: http://jsfiddle.net/hslincoln/7HXBQ/10/

Any advice or suggestions?

jquery css html-table

Answer 1

Answer №1

Your previous code on jsfiddle was almost correct. I have made some updates and corrections: http://jsfiddle.net/Ht5nm/2/.

Here are the corrections:

var secondrow = $('.wizrtable').children('tr:second');

The :second pseudo selector does not exist. Use :nth-child(n) instead. Also, .children() only works on immediate children, so you need to include tbody in the selector.

var secondrow = $('.wizrtable tbody').children('tr:nth-child(2)');

I am not sure why there were + signs before the variables.

if(+amountofproducts >= 4 && +amountofproducts <= 8)

. However, this variable depends on the number of table rows, so the if statement may not work for your jsfiddle example.

In addition, I had to add #checkout in my jsfiddle for expected code execution that was missing in your original version.

Your current approach may not be scalable for handling multiple table rows. It would be better to dynamically manage rows rather than using firstrow, secondrow, thirdrow, etc.

var Firstprodprice = jQuery("FirstprodPrice").text(firstprice);

This line does not require assigning a variable. In addition, the element with the class 'Firstprodprice' should have a lowercase 'p' in price. Therefore, this line would not have any effect.

Answer 2

Your previous code on jsfiddle was almost correct. I have made some updates and corrections: http://jsfiddle.net/Ht5nm/2/.

Here are the corrections:

var secondrow = $('.wizrtable').children('tr:second');

The :second pseudo selector does not exist. Use :nth-child(n) instead. Also, .children() only works on immediate children, so you need to include tbody in the selector.

var secondrow = $('.wizrtable tbody').children('tr:nth-child(2)');

I am not sure why there were + signs before the variables.

if(+amountofproducts >= 4 && +amountofproducts <= 8)

. However, this variable depends on the number of table rows, so the if statement may not work for your jsfiddle example.

In addition, I had to add #checkout in my jsfiddle for expected code execution that was missing in your original version.

Your current approach may not be scalable for handling multiple table rows. It would be better to dynamically manage rows rather than using firstrow, secondrow, thirdrow, etc.

var Firstprodprice = jQuery("FirstprodPrice").text(firstprice);

This line does not require assigning a variable. In addition, the element with the class 'Firstprodprice' should have a lowercase 'p' in price. Therefore, this line would not have any effect.

Answer 3

Answer №2

Your HTML contains some handy div elements that eliminate the need for regular expressions. Although untested, a possible solution could be...

$('#wizrtable tr').each( function( index,element)  {
   var sku = $(element).find( 'div[title="pid"]').text();
   var qty = $(element).find( 'div[title="qty"]').text();
   var price = $(element).find( 'div[title="tv"]').text();
});

Answer 4

Your HTML contains some handy div elements that eliminate the need for regular expressions. Although untested, a possible solution could be...

$('#wizrtable tr').each( function( index,element)  {
   var sku = $(element).find( 'div[title="pid"]').text();
   var qty = $(element).find( 'div[title="qty"]').text();
   var price = $(element).find( 'div[title="tv"]').text();
});

Answer 5

Answer №3

Aside from generating the output, this process eliminates the need to manually determine the number of products in the table and scrapes data for the entire table....

$(document).ready(function () {
// Define unit price
var tbody = $('.wizrtable tbody');
var prices = $(tbody).find('.priceeach');
var skus = $(tbody).find('.sku');
var quants = $(tbody).find('.quantity');
var product = [];

$(prices).each(function (idx) {
    product[idx] = {
        price: $(this).text().replace(/\u00A3/g, '')
    }
});
// END: Define unit price

// Assign item IDs to each product
$(skus).each(function (idx) {
    product[idx].sku = $(this).text().replace("Product Code:", "");
});

$(quants).each(function (idx) {
    product[idx].qty = $(this).text();
});
// END: Assign item IDs to each product

// Populate html div with results
// Product 1
$(".Firstprodprice").text(product[0].price);
$(".FirstSKU").text(product[0].sku);
$(".FirstQTY").text(product[0].qty);
// Product 2
$(".Secondprodprice").text(product[1].price);
$(".SecondSKU").text(product[1].sku);
$(".SecondQTY").text(product[1].qty);
// Product 3
$(".Thirdprodprice").text(product[2].price);
$(".ThirdSKU").text(product[2].sku);
$(".ThirdQTY").text(product[2].price);
});

Answer 6

Aside from generating the output, this process eliminates the need to manually determine the number of products in the table and scrapes data for the entire table....

$(document).ready(function () {
// Define unit price
var tbody = $('.wizrtable tbody');
var prices = $(tbody).find('.priceeach');
var skus = $(tbody).find('.sku');
var quants = $(tbody).find('.quantity');
var product = [];

$(prices).each(function (idx) {
    product[idx] = {
        price: $(this).text().replace(/\u00A3/g, '')
    }
});
// END: Define unit price

// Assign item IDs to each product
$(skus).each(function (idx) {
    product[idx].sku = $(this).text().replace("Product Code:", "");
});

$(quants).each(function (idx) {
    product[idx].qty = $(this).text();
});
// END: Assign item IDs to each product

// Populate html div with results
// Product 1
$(".Firstprodprice").text(product[0].price);
$(".FirstSKU").text(product[0].sku);
$(".FirstQTY").text(product[0].qty);
// Product 2
$(".Secondprodprice").text(product[1].price);
$(".SecondSKU").text(product[1].sku);
$(".SecondQTY").text(product[1].qty);
// Product 3
$(".Thirdprodprice").text(product[2].price);
$(".ThirdSKU").text(product[2].sku);
$(".ThirdQTY").text(product[2].price);
});

Discovering data in individual tr elements within a table with jQuery by utilizing .text()

Answer №1

Answer №2

Answer №3

Similar questions

Using Backbone.js to Retrieve Data from the Server and Bind it to a Model

Can you explain the distinction between using .hover and :hover?

Having trouble retrieving JSON data from an AJAX request and showing it in an HTML page

Using Jquery to attach an event to a particular div which is part of a group of divs sharing

Utilize the CSS property font-family to inherit styles for headings

Tips for avoiding content appearing beneath overlapping elements

displaying only the date in bootstrap-datetimepicker

The inclusion of individual CSS files in a TypeScript React project does not have any effect

Changing from using GET to employing POST

Tips for automatically scrolling images horizontally in responsive layouts

Prevent any further dissemination if I continue typing repeatedly

The overflow hidden function does not seem to be fully functional on the iPad

Using cakePHP to submit a form using ajax

Move the contents of a div to the right side

When attempting to check and uncheck checkboxes with a specific class, the process fails after the first uncheck

Enhancing Tabulator tooltips with custom CSS styles

What is the best method for passing parameters from HTML to AJAX within code?

Utilizing Jquery for comparing and retrieving string arrays

The HTML element <a> can have both a href attribute and a onclick attribute

Executing AJAX function via a dropdown button