jQuery 在具有特定属性的表 tr 项目周围添加 div

【问题标题】：jQuery add div around table tr items which have specific attributejQuery 在具有特定属性的表 tr 项目周围添加 div
【发布时间】：2017-01-03 07:24:09
【问题描述】：

我有一个带有 tr 的表，其中很少有属性处于活动状态，而其中很少有属性处于非活动状态。我正在尝试将它们分组。如何在具有非活动属性项的 tr 周围添加 div 包装器。

当前代码：

    <div class="alertsList">
        <table width="100%">
            <tbody>
                <tr>
                    <th></th>
                    <th>Id</th>
                    <th>From</th>
                    <th>Action</th>
                    <th>State</th>
                    <th>time</th>
                    <tr class="alertRow" state="Active">
                        <td></td>
                        <td>1025973</td>
                        <td>SYSTEM</td>
                        <td>false</td>
                        <td class="Active">Active</td>
                        <td>2014-09-23T00:59:26.92</td>
                    </tr>
                    <tr class="alertRow" state="Active">
                        <td></td>
                        <td>1025974</td>
                        <td>SYSTEM</td>
                        <td>false</td>
                        <td class="Active">Active</td>
                        <td>2014-09-23T00:59:26.92</td>
                    </tr>
                    <tr class="alertRow" state="InActive">
                        <td></td>
                        <td>1025974</td>
                        <td>SYSTEM</td>
                        <td>false</td>
                        <td class="InActive">InActive</td>
                        <td>2014-09-23T00:59:26.92</td>
                    </tr>
                    <tr class="alertRow" state="InActive">
                        <td></td>
                        <td>1025974</td>
                        <td>SYSTEM</td>
                        <td>false</td>
                        <td class="InActive">InActive</td>
                        <td>2014-09-23T00:59:26.92</td>
                    </tr>
                    <tr class="alertRow" state="Active">
                        <td></td>
                        <td>1025974</td>
                        <td>SYSTEM</td>
                        <td>false</td>
                        <td class="Active">Active</td>
                        <td>2014-09-23T00:59:26.92</td>
                    </tr>
            </tbody>
        </table>
    </div>

必填：我正在努力实现以下目标

<div class="alertsList">
    <table width="100%">
        <tbody>
            <tr>
                <th></th>
                <th>Id</th>
                <th>From</th>
                <th>Action</th>
                <th>State</th>
                <th>time</th>
          <tr class="alertRow" state="Active">
                    <td></td>
                    <td>1025974</td>
                    <td>SYSTEM</td>
                    <td>false</td>
                    <td class="Active">Active</td>
                    <td>2014-09-23T00:59:26.92</td>
                </tr>      
          <tr class="alertRow" state="Active">
                    <td></td>
                    <td>1025973</td>
                    <td>SYSTEM</td>
                    <td>false</td>
                    <td class="Active">Active</td>
                    <td>2014-09-23T00:59:26.92</td>
                </tr>
                <tr class="alertRow" state="Active">
                    <td></td>
                    <td>1025974</td>
                    <td>SYSTEM</td>
                    <td>false</td>
                    <td class="Active">Active</td>
                    <td>2014-09-23T00:59:26.92</td>
                </tr>

**<div class="inAct">**
                <tr class="alertRow" state="InActive">
                    <td></td>
                    <td>1025974</td>
                    <td>SYSTEM</td>
                    <td>false</td>
                    <td class="InActive">InActive</td>
                    <td>2014-09-23T00:59:26.92</td>
                </tr>
                <tr class="alertRow" state="InActive">
                    <td></td>
                    <td>1025974</td>
                    <td>SYSTEM</td>
                    <td>false</td>
                    <td class="InActive">InActive</td>
                    <td>2014-09-23T00:59:26.92</td>
                </tr>
      **</div>**
        </tbody>
    </table>
</div>

【问题讨论】：

  • 您不能在 tr 标签周围添加 div。这在语义上不好。
  • 我建议不要将div 包裹在一组表行周围，并为您的tr 元素提供无效属性state，而是切换到为表行提供类“活动” ' 或 'inactive'（除了 'alertRow' 之外或代替 'alertRow'）。将表中的所有行归为同一类 alertRow 也没有任何意义。最好将类分配给表本身。
  • 顺便说一句，您可以将它们放在单独的 tbody 元素中，而不是用 &lt;div&gt; 包装您的 trs。这实际上是一种有效的 HTML 做法。

标签： jquery html html-table word-wrap


【解决方案1】：

因为&lt;tr&gt; 元素的唯一有效父元素是&lt;table&gt;、&lt;tbody&gt;、&lt;thead&gt; 和&lt;tfoot&gt;（不是&lt;div&gt;），并且唯一有效的子元素这些元素的元素是&lt;tr&gt; 元素（再次不是&lt;div&gt;），我建议不要使用&lt;div&gt;（很明显）。

也就是说，&lt;table&gt; 可以包含多个 &lt;tbody&gt; 元素，所以我建议使用其中之一：

// get the <tr> elements with the class of 'alertRow' and
// the 'state' equal to 'InActive':
$('tr.alertRow[state="InActive"]')
// wrap all those elements (together) in one <tbody>
// element, created here:
.wrapAll('<tbody class="InAct"></tbody>')
// wrapAll() returns the wrapped elements, we want the
// created-element, so we use parent():
.parent()
// we append that parent (along with its contained descendants)
// to the existing table:
.appendTo('div.alertsList table');


$('tr.alertRow[state="InActive"]')
  .wrapAll('<tbody class="InAct"></tbody>')
  .parent()
  .appendTo('div.alertsList table');
.InAct tr {
  color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alertsList">
  <table width="100%">
    <tbody>
      <tr>
        <th></th>
        <th>Id</th>
        <th>From</th>
        <th>Action</th>
        <th>State</th>
        <th>time</th>
      </tr>
      <tr class="alertRow" state="Active">
        <td></td>
        <td>1025973</td>
        <td>SYSTEM</td>
        <td>false</td>
        <td class="Active">Active</td>
        <td>2014-09-23T00:59:26.92</td>
      </tr>
      <tr class="alertRow" state="Active">
        <td></td>
        <td>1025974</td>
        <td>SYSTEM</td>
        <td>false</td>
        <td class="Active">Active</td>
        <td>2014-09-23T00:59:26.92</td>
      </tr>
      <tr class="alertRow" state="InActive">
        <td></td>
        <td>1025974</td>
        <td>SYSTEM</td>
        <td>false</td>
        <td class="InActive">InActive</td>
        <td>2014-09-23T00:59:26.92</td>
      </tr>
      <tr class="alertRow" state="InActive">
        <td></td>
        <td>1025974</td>
        <td>SYSTEM</td>
        <td>false</td>
        <td class="InActive">InActive</td>
        <td>2014-09-23T00:59:26.92</td>
      </tr>
      <tr class="alertRow" state="Active">
        <td></td>
        <td>1025974</td>
        <td>SYSTEM</td>
        <td>false</td>
        <td class="Active">Active</td>
        <td>2014-09-23T00:59:26.92</td>
      </tr>
    </tbody>
  </table>
</div>

请注意，虽然自定义元素 有效，但它们无效有效（在 HTML5 之外），在 HTML5 中它们是 data-前缀，给出data-state的（有效的）自定义属性：

<div class="alertsList">
  <table width="100%">
    <tbody>
      <tr>
        <th></th>
        <th>Id</th>
        <th>From</th>
        <th>Action</th>
        <th>State</th>
        <th>time</th>
      </tr>
      <tr class="alertRow" data-state="Active">
        <td></td>
        <td>1025974</td>
        <td>SYSTEM</td>
        <td>false</td>
        <td class="Active">Active</td>
        <td>2014-09-23T00:59:26.92</td>
      </tr>
      <tr class="alertRow" data-state="InActive">
        <td></td>
        <td>1025974</td>
        <td>SYSTEM</td>
        <td>false</td>
        <td class="InActive">InActive</td>
        <td>2014-09-23T00:59:26.92</td>
      </tr>
      <!-- and so forth... -->
  </table>
</div>

做出修改后，上面的 jQuery 仍然可以正常工作，尽管必须修改属性选择器以匹配新的自定义属性，给出：

$('tr.alertRow[data-state="InActive"]')
.wrapAll('<tbody class="InAct"></tbody>')
.parent()
.appendTo('div.alertsList table');


$('tr.alertRow[data-state="InActive"]')
  .wrapAll('<tbody class="InAct"></tbody>')
  .parent()
  .appendTo('div.alertsList table');
.InAct tr {
  color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alertsList">
  <table width="100%">
    <tbody>
      <tr>
        <th></th>
        <th>Id</th>
        <th>From</th>
        <th>Action</th>
        <th>State</th>
        <th>time</th>
      </tr>
      <tr class="alertRow" data-state="Active">
        <td></td>
        <td>1025973</td>
        <td>SYSTEM</td>
        <td>false</td>
        <td class="Active">Active</td>
        <td>2014-09-23T00:59:26.92</td>
      </tr>
      <tr class="alertRow" data-state="Active">
        <td></td>
        <td>1025974</td>
        <td>SYSTEM</td>
        <td>false</td>
        <td class="Active">Active</td>
        <td>2014-09-23T00:59:26.92</td>
      </tr>
      <tr class="alertRow" data-state="InActive">
        <td></td>
        <td>1025974</td>
        <td>SYSTEM</td>
        <td>false</td>
        <td class="InActive">InActive</td>
        <td>2014-09-23T00:59:26.92</td>
      </tr>
      <tr class="alertRow" data-state="InActive">
        <td></td>
        <td>1025974</td>
        <td>SYSTEM</td>
        <td>false</td>
        <td class="InActive">InActive</td>
        <td>2014-09-23T00:59:26.92</td>
      </tr>
      <tr class="alertRow" data-state="Active">
        <td></td>
        <td>1025974</td>
        <td>SYSTEM</td>
        <td>false</td>
        <td class="Active">Active</td>
        <td>2014-09-23T00:59:26.92</td>
      </tr>
    </tbody>
  </table>
</div>

参考资料：

【讨论】：

    【解决方案2】：

    我不建议用 div 包装你的表格行，但你可以使用 .wrap() 来做到这一点，甚至不确定它们是否会被显示，但是你去吧。

     $("tr.alertRow").wrap("<div/>");

    【讨论】：

      【解决方案3】：

      使用.wrap()，您可以在内部元素周围插入一个 HTML 结构，如下所示：

      $(".alertsList table").find("tr[state='InActive']").each(function () {
    $(this).wrap("<div class='inAct'></div>");
});

      http://jsfiddle.net/csdtesting/kvyunto9/

      【讨论】：

        猜你喜欢
        • 2011-11-16
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2020-05-14
        • 1970-01-01
        • 2015-02-06
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode