栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

从JQuery数据表中删除特定的行

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

从JQuery数据表中删除特定的行

您需要确保您拥有

thead

<div id="first">    <table id="firstTable">        <thead> <tr>     <th>One</th>     <th>Two</th>     <th>Three</th>     <th>Yes/No</th> </tr>        </thead>        <tbody> <tr role="row" data-user="Yes">     <td>1 One</td>     <td>1 Two</td>     <td>1 Three</td>     <td>Yes</td> </tr> <tr>     <td>2 One</td>     <td>2 Two</td>     <td>2 Three</td>     <td>No</td> </tr> <tr>     <td>3 One</td>     <td>3 Two</td>     <td>3 Three</td>     <td>Yes</td> </tr> <tr>     <td>4 One</td>     <td>4 Two</td>     <td>4 Three</td>     <td>Yes</td> </tr> <tr>     <td>4 One</td>     <td>4 Two</td>     <td>4 Three</td>     <td>Yes</td> </tr> <tr>     <td>5 One</td>     <td>5 Two</td>     <td>5 Three</td>     <td>No</td> </tr>        </tbody>    </table></div><div id="second">    <table id="secondTable">        <thead> <tr>     <th>One</th>     <th>Two</th>     <th>Three</th>     <th>Yes/No</th> </tr>        </thead>        <tbody> <tr>     <td>1 One</td>     <td>1 Two</td>     <td>1 Three</td>     <td>Yes</td> </tr> <tr>     <td>2 One</td>     <td>2 Two</td>     <td>2 Three</td>     <td>No</td> </tr> <tr>     <td>3 One</td>     <td>3 Two</td>     <td>3 Three</td>     <td>Yes</td> </tr> <tr>     <td>4 One</td>     <td>4 Two</td>     <td>4 Three</td>     <td>Yes</td> </tr> <tr>     <td>4 One</td>     <td>4 Two</td>     <td>4 Three</td>     <td>Yes</td> </tr> <tr>     <td>5 One</td>     <td>5 Two</td>     <td>5 Three</td>     <td>No</td> </tr>        </tbody>    </table></div><div id="third">    <table id="thirdTable">        <thead> <tr>     <th>One</th>     <th>Two</th>     <th>Three</th>     <th>Yes/No</th> </tr>        </thead>        <tbody> <tr>     <td>1 One</td>     <td>1 Two</td>     <td>1 Three</td>     <td>Yes</td> </tr> <tr>     <td>2 One</td>     <td>2 Two</td>     <td>2 Three</td>     <td>No</td> </tr> <tr>     <td>3 One</td>     <td>3 Two</td>     <td>3 Three</td>     <td>Yes</td> </tr> <tr>     <td>4 One</td>     <td>4 Two</td>     <td>4 Three</td>     <td>Yes</td> </tr> <tr>     <td>4 One</td>     <td>4 Two</td>     <td>4 Three</td>     <td>Yes</td> </tr> <tr>     <td>5 One</td>     <td>5 Two</td>     <td>5 Three</td>     <td>No</td> </tr>        </tbody>    </table></div>

这将停止DataTables的抱怨,然后可以这样创建DataTables:

$(function() {     var firstTable = $('#firstTable').DataTable();     var secondTable = $('#secondTable').DataTable({         "initComplete": function(settings) {  var api = this.api();  api.rows().every(function(rowIdx, tableLoop, rowLoop) {      var data = this.data();      if (data && data[3] !== "Yes") {          api.rows(rowIdx).nodes().to$().addClass('remove');      }  });  api.rows('.remove').remove().draw();         }     });     var thirdTable = $('#thirdTable').DataTable({         "initComplete": function(settings) {  var api = this.api();  api.rows().every(function(rowIdx, tableLoop, rowLoop) {      var data = this.data();      if (data && data[3] !== "No") {          api.rows(rowIdx).nodes().to$().addClass('remove');      }  });  api.rows('.remove').remove().draw();         }     }); });

在这里工作的JSFiddle。希望能有所帮助(TBH可能有更好的方法-
也许其他人会加入,因为这确实很hackie-总是有一些值得关注的地方……JSFiddle是您的朋友)。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/447281.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号