如何在動態添加新行後應用jQuery表格條紋？

我無法弄清楚在向表中添加新行後如何維護表格條紋。如果我將.insertAfter()選擇器更改爲#names tr:last，它的工作方式與我的預期相同，但是在新行中使用tr:first或tr:nth-child(x)結果，而在其下面的所有行都將被條帶化。在Chrome開發人員工具中查看更新的DOM時，一切看起來都很正常。我希望有人能向我解釋爲什麼這不起作用。我覺得我必須錯過一些根本性的東西。代碼如下：如何在動態添加新行後應用jQuery表格條紋？

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
      .striped { 
       background-color: #silver; 
      } 
     </style> 

     <script type="text/javascript" src="jquery-1.4.3.js"></script> 
     <script type="text/javascript"> 
      function stripes() { 
       $("tr:even").each(function() { 
        $(this).addClass("striped"); 
       }); 
      } 

      $(function() { 
       stripes(); 
       $("#addRow").click(function() { 
        $("<tr><td>Kenny</td><td>Bania</td></tr>").insertAfter("#names tr:first"); 
        stripes(); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div> 
      <a href="#" id="addRow">Add Row</a> 
      <table> 
       <thead> 
        <tr> 
         <th>First Name</th> 
         <th>Last Name</th> 
        </tr> 
       </thead> 
       <tbody id="names"> 
        <tr> 
         <td>Jerry</td> 
         <td>Seinfeld</td> 
        </tr> 
        <tr> 
         <td>Elaine</td> 
         <td>Benes</td> 
        </tr> 
        <tr> 
         <td>George</td> 
         <td>Costanza</td> 
        </tr> 
        <tr> 
         <td>Cosmo</td> 
         <td>Kramer</td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </body> 
</html>

謝謝！

來源

2010-10-28 Lucifer Sam

您需要先刪除.striped類。

function stripes() { 
      $("tr").each(function() { 
       $(this).removeClass("striped"); 
      }); 
      $("tr:even").each(function() { 
       $(this).addClass("striped"); 
      }); 
     }

來源

2010-10-28 03:03:27 Shelvin

哇，應該是明顯的。謝謝！ – 2010-10-28 03:33:14

我們爲什麼要打電話給每個人？ jQuery不需要遍歷整個集合。 $（ 'TR'）removeClass（ '條紋'）。 $（ 'TR：即使'）addClass（ '條紋'）。是你所需要的全部 – Samo 2010-10-28 03:57:05

如何在動態添加新行後應用jQuery表格條紋？

回答

相關問題