CODEWITHSUNDEEP
javascriptjqueryhtml
Abbas
Abbas

Reputation: 230

How to get next row of HTML table based on some condition using jQuery?

Ok, I am new to JQuery and I have requirement to do some manipulation on table based on rows.

The table consists of rows which belong to 3 different style classes Brand have category and category have products.

  var table = $("table tbody");

  table.find(".brand").each(function(i) {

      var $tdsBrand = $(this).find("td"),
          brand = $tdsBrand.eq(0).text(),
          atyBrand = $tdsBrand.eq(1).text(),
          alyBrand = $tdsBrand.eq(2).text();
      console.log('Brand Row ' + (i + 1) + ':\nBrand Name: ' + brand + '\nActual TY: ' + atyBrand + '\nActual LY: ' + alyBrand);

      var brandClass = $(this).attr("class");
      console.log('brand class : ' + brandClass);

      if (this row has next row as category) {

          //if(brand.next($( "tr[class='category']" ))) {
          //if ("(.band):has(.category)") {
          //if ($(this).parents(".category").length == 1) {

          table.find(".category").each(function(i) {
              var catClass = $(this).attr("class");
              console.log('category class : ' + catClass);

              var $tdsCategory = $(this).find("td"),
                  category = $tdsCategory.eq(0).text(),
                  atyCategory = $tdsCategory.eq(1).text(),
                  alyCategory = $tdsCategory.eq(2).text();
              console.log('Category Row ' + (i + 1) + ':\nCategory Name: ' + category + '\nActual TY: ' + atyCategory + '\nActual LY: ' + alyCategory);

              if (This row has next row as product) {

                  //if(next($( "tr[class='product']" ))) { 
                  //if ("(.category):has(.product)") {
                  //if ($(this).parents("product").length == 1) {

                  table.find(".product").each(function(i) {

                      var proClass = $(this).attr("class");
                      console.log('product class : ' + proClass);

                      var $tds = $(this).find("td"),
                          product = $tds.eq(0).text(),
                          aty = $tds.eq(1).text(),
                          aly = $tds.eq(2).text();
                      console.log('Product Row ' + (i + 1) + ':\nProduct Name: ' + product + '\nActual TY: ' + aty + '\nActual LY: ' + aly);
                  });
              }
          });
      }
  });

What I want to do is, I have to sum up Actual TY values of products and display them on their category. Then sum up Actual TY of categories (which has been calculated from products for different categories) to their brand.

Please refer http://jsfiddle.net/cfhhz0zr/46/ for clear understanding of my requirement and code which I've tried till now.

Thank you.

Upvotes: 4

Views: 637

Answers (1)

dawez
dawez

Reputation: 2714

Just modified a bit your code and it seems that is doing what you are looking for. See also the http://jsfiddle.net/88prg1dt/

I refactored a bit and renamed some variables to make a bit more sense so should be fairly clear now. If you want to calculate the total for a product / category now should be really super simple.

Here is the JS code:

var $table = $("table tbody");

$table.find(".brand").each(function (brandIndex) {
    var $brandRow = $(this);
    var $tdsBrand = $(this).find("td");
    var brandName = $tdsBrand.eq(0).text();
    var atyBrand = $tdsBrand.eq(1).text();
    var alyBrand = $tdsBrand.eq(2).text();

    console.log('Brand Row ' + (brandIndex + 1) + ':\nBrand Name: ' + brandName + '\nActual TY: ' + atyBrand + '\nActual LY: ' + alyBrand);

    var $categoryRows = $brandRow.nextUntil('.brand').filter('.category');
    $categoryRows.each(function (categoryIndex) {
        var $categoryRow = $(this);
        var $tdsCategory = $categoryRow.find("td");
        var categoryName = $tdsCategory.eq(0).text();
        var atyCategory = $tdsCategory.eq(1).text();
        var alyCategory = $tdsCategory.eq(2).text();

        console.log('Category Row: ' + (categoryIndex + 1) + ':\nCategory Name: ' + categoryName + '\nActual TY: ' + atyCategory + '\nActual LY: ' + alyCategory);

        var $productRows = $categoryRow.nextUntil('.brand, .category').filter('.product');
        $productRows.each(function (productIndex) {
            var $productRow = $(this);
            var $tdProducts = $productRow.find("td");
            var productName = $tdProducts.eq(0).text();
            var atyProduct = $tdProducts.eq(1).text();
            var aly = $tdProducts.eq(2).text();

            console.log('Product Row ' + (productIndex + 1) + ':\nProduct Name: ' + productName + '\nActual TY: ' + atyProduct + '\nActual LY: ' + aly);

        });
    });
});

I played a bit with jQuery nextUntil() method as the documentation:

Description: Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.

Is this answering your question ?

Upvotes: 1

Related Questions