Bgcolor動態使用jquery動態使用表中的替代行

我創建了使用「添加行」按鈕將行添加到表中的程序。每行都作爲新行添加到表中。我想爲奇數和偶數行添加不同的背景色。我正在使用jquery添加背景，但在我的代碼中有一點錯誤。我的意思是我可以在行中添加背景顏色，但顯示不正確。Bgcolor動態使用jquery動態使用表中的替代行

這裏是jQuery代碼;

<script> 
    $(document).ready(function() { 
     var id = 0; 

     // Add button functionality 
     $("#addrow").click(function() { 
      id++; 

      if(id%2==0){ 
       $(".prototype td").css("background-color","#eee"); 
      }else{ 
       $(".prototype td").css("background-color","#ddd"); 
      } 

      var master = $(this).parents("table.stdform"); 

      // Get a new row based on the prototype row 
      var prot = master.find(".prototype").clone(); 

      master.find(".fancyTable tbody").append(prot); 

     }); 
    }); 
</script>

這裏是HTML代碼;

<html> 
<head> 
    <title></title> 
</head> 
<body> 
    <table width="100%" cellpadding="0" cellspacing="0" border="0" 
    class="stdform"> 
     ..other codes... 
     <tr><td> 
     <table class="fancyTable" id="sortable-table" 
       cellpadding="0" cellspacing="0" width="100%"> 
       <thead> 
        <tr> 
         <td>header one</td> 
         <td>header two</td> 
         <td>header three</td> 
        </tr> 
       </thead> 
       <tbody id="job-tbody"> 
        <tr class="prototype"> 
         <td>one</td> 
         <td>two</td> 
         <td>three</td> 
        </tr> 
       </tody> 
     </table> 
     </td></tr> 
    </table> 
</body> 
</html>

謝謝..

來源

2014-01-31 Sandar Min Aye

這是一個明顯的CSS問題 - 所以尋找斑馬錶 – mplungjan

感謝@mplungjan，我用 '$（「。fancyTable tbody tr：n-child（odd）「）.addClass（」奇數「）; （「。fancyTable tbody tr：nth-child（even）」）。addClass（「even」）; –

您可以用CSS樣式表做到這一點，或者你可以用jQuery做到這一點：

http://api.jquery.com/odd-selector/

從jQuery的網站

摘自代碼：

<table border="1"> 
    <tr><td>Row with Index #0</td></tr> 
    <tr><td>Row with Index #1</td></tr> 
    <tr><td>Row with Index #2</td></tr> 
    <tr><td>Row with Index #3</td></tr> 
</table> 

<script> 
    $("tr:odd").css("background-color", "#bbbbff"); 
</script>

請注意，html沒有任何css樣式，以及j查詢在一行中完成該工作。如果你想訪問甚至是顏色，總是有「tr：even」選擇器。

http://api.jquery.com/even-selector/

一個額外的問題（這只是如果你不使用回發刷新表，並希望刷新直播）

還有一個問題，你可能你遇到的時候添加一個新行。你的頁面準備好後，你的jquery.ready函數會被執行一次。所以既然你已經準備好了處理你已經擁有的html表格的jquery代碼$("tr:odd"){...}，那麼css樣式只會影響這些行，而不會影響你在之後添加的任何新行。

您可以採取捷徑，然後添加與jquery.ready函數相同的代碼並將其應用於您的點擊處理程序（如果您的用戶需要添加很多內容並且您的表是巨大的），或者你可以跟蹤你的表的最後一行，找出它是奇數還是偶數，並且在添加新行時應用這種css樣式。

我會一直計算表中有多少項，並將該數作爲您要添加的新行的決定性因素。

來源

2014-01-31 06:39:21 sksallaj

您可以使用jQuery Odd和even selecter，

試試這個代碼：

DEMO

$(document).ready(function() { 
      $("tr:odd").css("background-color","#eee"); 
      $("tr:even").css("background-color","#ddd"); 
     });

來源

2014-01-31 06:40:22 Manoj

Bgcolor動態使用jquery動態使用表中的替代行

回答

相關問題