Question

我有两个嵌套表。一个外部表和外部表的每一行中都有内部表。我的问题是，当我使用searchBox进行过滤时，它同时过滤了外部和内部的表。我不想过滤我的内部表行。看看我的问题，我不想过滤我的内部表。

var $rows = $('#top_table tr');

$('#txtsearch').keyup(function () {
	var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

	$rows.show().filter(function () {
		var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
		return !~text.indexOf(val);
	}).hide();

});

tr.top_tr td {
	border-bottom: 1px solid black;
	min-width: 16%;
}

th {
	font: bold 11px"Helvetica Neue", Verdana, Arial, Helvetica, sans-serif;
	color: #4f6b72;
	border-right: 1px solid #C1DAD7;
	border-bottom: 1px solid #C1DAD7;
	border-top: 1px solid #C1DAD7;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: left;
	padding: 6px 6px 6px 12px;
	background: #CAE8EA url(images/bg_header.jpg) no-repeat;
	width: 16%;
}

td {
	border-right: 1px solid #C1DAD7;
	border-bottom: 1px solid #C1DAD7;
	background: #fff;
	padding: 0px;
	color: #4f6b72;
	width: 14%;
}

td:first-child {
	border-left: 1px solid #C1DAD7;
}

table {
	padding: 0px;
}

#top_table {
	padding: 10px;
	width: 800px;
}

body {
	padding: 10px;
}

.subtable {
	width: 100%;
}

.body-td {
	border: none;
	width: 16%;
}

.collapse {
	position: relative;
	height: 0;
	overflow: hidden;
	-webkit-transition: height 0.35s ease;
	-moz-transition: height 0.35s ease;
	-o-transition: height 0.35s ease;
	transition: height 0.35s ease;
	display: inline;
	width: 100%;
	float: left;
}

tr.collapse>td {
	display: table;
	width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="text" id="txtsearch" />
<table id="top_table">
   <thead>
      <tr>
         <th>List Name</th>
         <th>No. Records</th>
         <th>Avail. Records</th>
         <th>Creation Date</th>
         <th>Last Used</th>
         <th>Performance</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td colspan="6">
            <table class="subtable">
               <tbody>
                  <tr class="top_tr accordion-toggle" data-toggle="collapse" data-parent="#top_table" href="#collapseOne">
                     <td>LIST NO. 1</td>
                     <td>30000</td>
                     <td>3340</td>
                     <td>05-26-2004</td>
                     <td>21 days ago</td>
                     <td>7.3 % TRANSFER RATE</td>
                  </tr>
                  <tr >
                     <td colspan="6">
                        <table>
                           <tbody id="collapseOne" class="accordion-body collapse">
                              <tr>
                                 <td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
                              </tr>
                              <tr>
                                 <td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
                              </tr>
                              <tr>
                                 <td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
                              </tr>
                           </tbody>
                        </table>
                     </td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
      <tr>
         <td colspan="6">
            <table class="subtable">
               <tbody>
                  <tr class="top_tr  accordion-toggle" data-toggle="collapse" data-parent="#top_table" href="#collapseTwo">
                     <td>LIST NO. 2</td>
                     <td>30000</td>
                     <td>3340</td>
                     <td>05-26-2004</td>
                     <td>21 days ago</td>
                     <td>7.3 % TRANSFER RATE</td>
                  </tr>
                  <tr >
                     <td colspan="6">
                        <table>
                           <tbody id="collapseTwo" class="accordion-body collapse">
                              <tr>
                                 <td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
                              </tr>
                              <tr>
                                 <td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
                              </tr>
                              <tr>
                                 <td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
                              </tr>
                           </tbody>
                        </table>
                     </td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
      <tr>
         <td colspan="6">
            <table class="subtable">
               <tbody>
                  <tr class="top_tr">
                     <td>LIST NO. 3</td>
                     <td>30000</td>
                     <td>3340</td>
                     <td>05-26-2004</td>
                     <td>21 days ago</td>
                     <td>7.3 % TRANSFER RATE</td>
                  </tr>
                  <tr>
                     <td colspan="6">THIS IS A BIG ROW IN A TABLE</td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>

Answer 1

每个人我得到的答案都非常令人震惊，我只是专注于我真正想要的东西，而这甚至忽略了包含内部表的表行。答案是：var rows = $（“ tr：odd”），然后我在这些行上应用了过滤。:)谢谢您的宝贵时间。

防止在嵌套HTML表格中过滤内部表格

1 个答案: