jQuery选择器排除子表

时间:2017-11-15 04:29:30

标签: javascript jquery

这是jQuery脚本尝试删除html表的第一列

var order_table = $('.hor-scroll').eq(1);
//alert(order_table.html());
var order_table_copy = order_table;

order_table_copy.find(".order-tables th:first-child").remove();     
order_table_copy.find(".order-tables td:first-child").remove();

但上面的脚本也删除了qty-table的th,td

html

<table cellspacing="0" class="data order-tables" style="width: 100%;">
   <colgroup>
      <col>
      <col width="1">
      <col width="1">
      <col width="1">
      <col width="1">
      <col width="1">
      <col width="1">
      <col width="1">
      <col width="1">
      <col width="1">
   </colgroup>
   <thead>
      <tr class="headings">
         <th width="1">Localisation</th>
         <th>Image</th>
         <th>Product</th>
         <th>Sku</th>
         <th><span class="nobr">Item Status</span></th>
         <th>Unit Price</th>
         <th class="a-center">Qty</th>
         <th>Subtotal</th>
         <th>Marge</th>
      </tr>
   </thead>
   <tbody class="even">
      <tr class="border">
         <td class="a-left"></td>
         <td class="a-center">
            <img src="" width="100px">
         </td>
         <td class="a-left">Laser Pants</td>
         <td class="a-left">test</td>
         <td class="a-center">Mixed</td>
         <td class="a-right">
            <span class="price-excl-tax">
            <span class="price">$64.99</span>                
            </span>
            <br>
         </td>
         <td>
            <table cellspacing="0" class="qty-table">
               <tbody>
                  <tr>
                     <td>Ordered</td>
                     <td><strong>100</strong></td>
                  </tr>
                  <tr>
                     <td>Invoiced</td>
                     <td><strong>100</strong></td>
                  </tr>
                  <tr>
                     <td>Refunded</td>
                     <td><strong>9</strong></td>
                  </tr>
               </tbody>
            </table>
         </td>
         <td class="a-right">
            <span class="price-excl-tax">
            <span class="price">$6,499.00</span>                
            </span>
            <br>
         </td>
         <td class="a-center">
            0<span>%</span>    
         </td>
      </tr>
   </tbody>
   <tbody class="odd">
      <tr class="border">
         <td class="a-left"></td>
         <td class="a-center">
            <img src="" width="100px">
         </td>
         <td class="a-left">Laser Hoody</td>
         <td class="a-left">test</td>
         <td class="a-center">Invoiced</td>
         <td class="a-right">
            <span class="price-excl-tax">
            <span class="price">$84.99</span>                
            </span>
            <br>
         </td>
         <td>
            <table cellspacing="0" class="qty-table">
               <tbody>
                  <tr>
                     <td>Ordered</td>
                     <td><strong>100</strong></td>
                  </tr>
                  <tr>
                     <td>Invoiced</td>
                     <td><strong>100</strong></td>
                  </tr>
               </tbody>
            </table>
         </td>
         <td class="a-right">
            <span class="price-excl-tax">
            <span class="price">$8,499.00</span>                
            </span>
            <br>
         </td>
         <td class="a-center">
            0<span>%</span>    
         </td>
      </tr>
   </tbody>
</table>

但是我不能排除qty-table,我尝试了很多不同但不起作用。

1 个答案:

答案 0 :(得分:1)

尝试order_table_copy.find(".order-tables th:first-child:not(.qty-table)")

另请查看:first-of-type。还记得jQuery选择器返回一个数组。因此,如果所有其他方法都失败了,您可以始终使用数组的js filter函数。

更新:要避免使用.qty-table,请确保所选的td不是.qty-table

下的td
order_table_copy.find(".order-tables tr td:first-child:not(.qty-table td)").remove();