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

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

本文关键字：一行 HTML 获取 jQuery 何使用 条件      更新时间：2023-09-26

好吧，我是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/为了清楚地理解我的需求和代码，我已经尝试过了。

谢谢。

刚刚修改了一点代码，它似乎正在做你想要做的事情。另请参阅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()方法作为文档：

描述：获取每个元素的所有以下同级，最多可达但不超过包括选择器、DOM节点或jQuery匹配的元素对象已传递。

这是在回答你的问题吗？

相关文章：