JQuery

Question

我知道之前有人问过非常相似的问题，但我一直无法解决任何问题，这可能是由于平台（及其使用的 Jquery 版本）所致；

我有一个显示 table 的网页，目前看起来像这样；

该网页是一个 Dynamics 365 ADX 门户页面，它的实际 HTML 是 Bootstrap 3，只是这个带有一些 Liquid。（由于 Dynamics 的限制，无法更改 Bootstrap & JQuery 版本）。 table 实际上是嵌入到页面中的 Dynamics 实体视图。

<div class="container">
    <div class="page-heading">
        <ul class="breadcrumb">
            {% for crumb in page.breadcrumbs %}
            <li>
                <a href="{{ crumb.url }}">{{ crumb.title }}</a>
            </li>
            {% endfor %}
            <li class="active">Company Invoices</li>
        </ul>
        <div class="row" style="padding-bottom:10px;">
            <div class="col-md-12" style="border-bottom:1px solid #eee;">
                <h2 class="tab-title">COMPANY INVOICES</h2>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">

            {% block main %}
            {% include 'Page Copy' %}
            {% if page.adx_entitylist %}
            {% include 'entity_list' key: page.adx_entitylist.id %}
            {% endif %}
        {% endblock %}

    </div>
</div>

然后清理此网页并按照业务要求呈现它，我在页面上有此 Javascript，它隐藏了 3 列并添加了按钮。

我想做的是，当 'status' 列（隐藏）中的 td 的值为“已取消系统”时，我想隐藏整行。

$(document).ready(function () {
var portalUserId = window["Microsoft"].Dynamic365.Portal.User.contactId;
    $(".entitylist.entity-grid").on("loaded", function () {
    $('.entitylist').find("th:contains('Status')").hide();

     $(this).children(".view-grid").find("tr[data-id]").each(function (i, e){
        //debugger;
        var id = $(this).attr("data-id");
        $(this).find("td[data-attribute='statecode']").hide();
        $(this).find("td[data-attribute='statuscode']").hide();
        var status =  $(this).find("td[data-attribute='statuscode']")[0].innerText;
        var amount =  $(this).find("td[data-attribute='totalamount']")[0].innerText;
        var balance = $(this).find("td[data-attribute='ceda_balancedue']")[0].innerText;
        let issue_date = $(this).find("td[data-attribute='ceda_invoiceissuedate']")[0].innerText.split("/");
        let due_date = $(this).find("td[data-attribute='duedate']")[0].innerText.split("/");
        let today = new Date();
        const duedate = new Date(due_date[1] + "/" + due_date[0] + "/" + due_date[2]);
        const issuedate = new Date(issue_date[1] + "/" + issue_date[0] + "/" + issue_date[2]);
        if ((status == "Canceled") || (status == "Cancelled System")) {
            status = "CANCELLED";
            $(this).append("<td>CANCELLED</td>");
        }else if ((parseFloat(balance.split('$')[1]) < 0.00) || balance.contains("(")) {
            status = "CREDIT";
            $(this).append("<td>CREDIT</td>");
        } else if ((parseFloat(balance.split('$')[1]) > 0.00) && (duedate < today)) {
            status = "OVERDUE";
            $(this).append("<td style='color:red'>OVERDUE</td>")
        } else if ((parseFloat(balance.split('$')[1]) > 0.00) && (duedate => today)) {
            status = "OPEN";
            $(this).append("<td style='color:blue'>OPEN</td>");
        } else if (parseFloat(balance.split('$')[1]) == 0.00) {
            status = "PAID";
            $(this).append("<td>PAID</td>");
        }else if (parseFloat(balance.split('$')[1]) < 0.00 ) {
            status = "CREDIT";
            $(this).append("<td>CREDIT</td>");
        }
        
        //if((status == "BC Posted" || status == "BC Submitted" || status == "BC Submitted Failed" || status == "New") && parseFloat(amount.split('$')[1]) > 0){
        if ((status == "OPEN") || (status == "OVERDUE")) {
            $(this).append("<td><button class='btn btn-default pay' name = "+ id+","+balance + ">Pay</button></td>");
        }
     });
  });

  $('.table').each(function() {
      var $status = $(this).find("td").last().prev();
      var $row = $status.parent();

      if ($status.text() == 'Canceled'){
          $row.hide();
      } else {
          $row.show;
      }
  });
 /* additional code for button handling not displayed */

Answer 1

您似乎正在循环遍历 table 并在找到应取消的行时追加 <td>CANCELLED</td>：

if ((status == "Canceled") || (status == "Cancelled System")) {
  status = "CANCELLED";
  $(this).append("<td>CANCELLED</td>");
}

然后你循环查找所有“已取消”的单元格，然后试图隐藏它们的 parent 行：

$('.table').each(function() {
    var $status = $(this).find("td").last().prev();
    var $row = $status.parent();

    if ($status.text() == 'Canceled'){
        $row.hide();
    } else {
        $row.show;
    }
});

我认为这第二个循环不是必需的，因为您可以在找到“已取消”的行时隐藏它们：

if ((status == "Canceled") || (status == "Cancelled System")) {
  status = "CANCELLED";
  $(this).append("<td>CANCELLED</td>");
  $(this).hide(); // HIDE PARENT ROW
}

如果您仍想在单独的循环中隐藏，则必须找到 innerText 为“CANCELLED”的所有 <td> 元素（即您之前添加的元素）并隐藏它们parents:

$("td:contains('CANCELLED')").each(function() {
  $(this).parent().hide(); // HIDE PARENT ROW
});

JQuery - 根据 table 数据隐藏 table 行；

JQuery - Hide table row based on table data;

javascript

html

microsoft-dynamics