Question

我的页面中有一个这样的表：

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input type="text" id="myInput"  placeholder="Search for anything.." title="Type in a name" ></input>
<table  class="table table-bordered table-striped"  >
<tbody id="myTable">
<td>
<?php echo  $product_name ?>
</td>
<td>

<?php echo  $gender ?>
</td>
<td>
<?php echo  $date ?>
</td>

</td>
<td>
<?php echo  $quantity ?>
</td>
<td>
<?php echo  $shopname ?>
</td>
<td class="valor text-right">
<?php echo  $price ?>
</td>
</tbody>
<tfoot>
        <tr class="info">
            <td colspan="2" class="text-right">TOTAL:</td>
            <td class="total text-right"></td>
        </tr>
   </tfoot>
</table>

这里的想法是计算具有valor类的列的总数，并在表的底部显示有total类的列。

还有一个想法是，用户可以过滤在名为myInput的输入文本上键入任何内容的行，因此应重新计算总数。

这次，我可以使用以下jQuery代码过滤行：

$(document).ready(function () {

    var $rows = $(".table tbody tr");
    var total = 0;


$rows.each(function () {
    total += parseFloat($(this).find(".valor").text().replace(/\./g, "").replace(",", "."));
});
     $("#myInput").keyup(function () {
    var filtertext = $(this).val();
    var regex = new RegExp(filtertext, 'i');
    $rows.hide().filter(function () {
        return regex.test($(this).text());
    }).show();

    $(".table tbody tr:visible").each(function () {
        total += parseFloat($(this).find(".valor").text().replace(/\./g, "").replace(",", "."));
    });
    $(".total").html(formataTotal(total.toFixed(2)));

});

$(".total").html(formataTotal(total.toFixed(2)));
});

function formatTotal(num) {
var parts = num.toString().split(".");
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ".");
return parts.join(",");
}

通过使用上面的代码m成功过滤了行，但是在过滤行之后我没有得到任何列之和，也没有该列的总和

Answer 1

要使脚本正常运行需要解决的几件事

您已定义formatTotal，但您正在呼叫formataTotal。通过这种调整，您应该开始看到总输出。
您将看到一个总计，但是自从您现在有了一个运行总计是否在变量的全局范围内定义了变量total 脚本。这将一直持续到刷新浏览器。当您的键入功能开始时，请重置您的总数。 $("#myInput").keyup(function () { total = 0; ...

我建议还将您的一些代码分解为更小的，可重用的函数。例如，当设置总价值时，创建一个诸如

的函数

function displayTotal(total) {
    $(".total").html(formatTotal(total.toFixed(2)));
}

您可以再进一步一步，请注意，您始终使用相同的类来输出总数，因此您可能希望卸载该全局变量。

$totalElement = $(".total");
function displayTotal(total) {
    $totalElement.html(formatTotal(total.toFixed(2)));
}

您应该考虑始终如一地处理总值，并采取一些预防措施，以免最终获得“ NaN”值。同样，您可以取消使用功能检查一行价格的任务。

function getPriceForRow(row) {
   $valor = $(row).find(".valor");
   if($valor.length) {
     return parseFloat($valor.text().replace(/\./g, "").replace(",", "."));
   }
   return parseFloat(0);
}

通过一些小的调整，您的脚本可能看起来像这样。在这种情况下，还可以进行其他一些改进，并且您应该做一些理想的事情，但是希望我能将您的代码分解为可靠的功能，从而使您有所收获。

$(document).ready(function () {

    var $rows = $(".table tbody tr");
    var $totalElement = $(".total");
    var total = 0;

    $rows.each(function () {
        total += getPriceForRow(this);
    });
    displayTotal(total);

    $("#myInput").keyup(function () {
        total = 0;
        var filtertext = $(this).val();
        var regex = new RegExp(filtertext, 'i');
        $rows.hide().filter(function () {
            return regex.test($(this).text());
        }).show();
        $(".table tbody tr:visible").each(function () {
            total += getPriceForRow(this);
        });
        displayTotal(total);

    });

    function getPriceForRow(row) {
        $valor = $(row).find(".valor");
        if ($valor.length) {
            return parseFloat($valor.text().replace(/\./g, "").replace(",", "."));
        }
        return parseFloat(0);
    }

    function formatTotal(num) {
        var parts = num.toString().split(".");
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ".");
        return parts.join(",");
    }

    function displayTotal(total) {
        $totalElement.html(formatTotal(total.toFixed(2)));
    }
});

理想情况下，在这种情况下，您可以避免使用全局变量。您可能需要阅读MDN上的闭包。通过这种方式，您可以在脚本中在一定程度上模拟私有范围。或多或少地在需要的上下文中包装和保护值（我知道这是简化）。

由于各种原因，全局范围变量通常很麻烦。您可以对此here

进行一些阅读

accounting.js

也是一个很好的格式化货币的库

已过滤的行之和

1 个答案: