django 如何在html中过滤带有类名的表？

6yt4nkrj 于 2023-07-01 发布在 Go

关注(0)|答案(1)|浏览(121)

如果class =“node focused”，我如何过滤base.html中的table table-bordered table-sm table-active中的id数据
我想在我的表中只看到所选节点。{d.1} = div id

<div id="TEM01" data-parent="ATK" class="node focused"><div class="title" style="width:200px"><i class="oci oci-leader symbol"></i>ATK</div>

<div id="TEM02" data-parent="ATK" class="node"><div class="title" style="width:200px"><i class="oci oci-leader symbol"></i>ATK</div>

下面的chart.js

nodeClickHandler: function (event) {
      this.$chart.find('.focused').removeClass('focused');
      $(event.delegateTarget).addClass('focused');
    },

css below

.orgchart .node.focused {
  background-color: rgba(217, 83, 79, 0.8);
}

下面的base.html。

<body>
  <div id="chart-container"></div>
      {% block content %}
      {% endblock %}

    <script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.orgchart.js' %}"></script>
    <script src="{% static 'js/bootstrap.js' %}"></script>
  

  <div id=" row justify-content-md-center">
      <div class="col-sm">
          <h5 align="center"><i><span style="background-color: #262626"
                                      class=" badge badge-info">Node Information   </span></i>

          </h5>
          <table class="table table-bordered table-sm table-active">
              <tr>
                  <th>DVS</th>
                  <th>DWH</th>
                  <th>AO_Trap</th>
                  <th>BO_Trap</th>
                  <th>Info</th>
              </tr>

              <tr>
                 
                <tbody>
                  {% for d in alltables %}
                  <tr>
                      <td>{{d.1}}</td>
                      <td>{{d.1}}</td>
                      <td>{{d.2}}</td>
                      <td>{{d.3}}</td>
                  </tr>
                  {% endfor %}
                  </tbody>

              </tr>

          </table>

django

来源：https://stackoverflow.com/questions/76490751/how-to-filter-table-with-class-name-in-html

1条答案

按热度按时间

fdbelqdn1#

您可以使用JavaScript/jQuery根据所选节点调整表，类为“node focused”。这可以通过基于所选节点的ID过滤表来完成。看看这个例子，看看它是如何做到的：
通过附加一个响应节点单击的事件侦听器来添加表更新功能。要实现这一点，您需要调整当前JavaScript文件中的代码。

<script type="text/javascript">
  $(document).ready(function() {
    // Add a click event listener to the chart nodes
    $('#chart-container').on('click', '.node', function(event) {
      // Remove the 'focused' class from all nodes
      $('.node').removeClass('focused');

      // Add the 'focused' class to the clicked node
      $(this).addClass('focused');

      // Get the ID of the selected node
      var selectedNodeId = $(this).attr('id');

      // Filter the table rows based on the selected node ID
      $('table.table-bordered tr').hide();
      $('table.table-bordered td:contains(' + selectedNodeId + ')').parent().show();
    });
  });
</script>

base.html上的表中的每一行都需要一个ID属性，因此请确保添加该属性。
1.要修改表体的结构，请发挥创意并尝试不同的选项。
1.请确保测试您的更改，以确保它们正常工作。
这里是HTML修改后的代码。https://pastebin.com/ssY2xRyS（无法在此处粘贴html。）
在将“focused”类添加到图表中的节点后，仅显示第一列中包含所单击节点ID的表行。这就是过滤的工作方式。其余没有选定ID的行将被隐藏。

赞(0）回复(0）举报 2023-07-01

我来回答

django 如何在html中过滤带有类名的表？

1条答案

相关问题

热门标签

最新问答