javascript - 如何使用 jQuery 根据某些条件获取 HTML 表的下一行？

Question

好的，我是 JQuery 的新手，我需要根据行对表进行一些操作。

该表由属于 3 个不同样式类的行组成 Brand 有 category 和 category 有 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);
                  });
              }
          });
      }
  });

我想做的是，我必须总结产品的实际 TY 值并将它们显示在它们的类别中。然后将类别的实际 TY(根据不同类别的产品计算得出)汇总到他们的品牌。

请引用http://jsfiddle.net/cfhhz0zr/46/为了清楚地了解我到目前为止尝试过的要求和代码。

谢谢。

Answer 1

只是稍微修改了您的代码，它似乎正在做您正在寻找的事情。另见 http://jsfiddle.net/88prg1dt/

我重构了一点并重命名了一些变量以使其更有意义所以现在应该相当清楚了。如果你想计算一个产品/类别的总数，现在应该非常简单。

这是JS代码:

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);

        });
    });
});

我玩了一下 jQuery nextUntil() 方法作为文档:

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.

这是否回答了您的问题？