向每個行中的每個td添加唯一類jquery/coffeescript

Question

我正在嘗試向每個行中的每個td添加一個唯一類（使用行索引）。表格行由用戶動態生成，我只需要在頁面加載時對行進行格式化。我不擅長javascript，所以我可能會做錯這個。

表：

<table class="inventory"> 
     <thead> 
      <tr> 
       <th class="invoice_th"><span>Item <br /><%= link_to "Create New Item", new_item_path, target: "_blank" %></span></th> 
       <th class="invoice_th"><span>Description</span></th> 
       <th class="invoice_th"><span>Unit Cost</span></th> 
       <th class="invoice_th"><span>Quantity</span></th> 
       <th class="invoice_th"><span>Price</span></th> 
      </tr> 
     </thead> 
     <tbody> 
     <tr class="itablerow"> 
      <td class="invoice_td"><%= link_to '#', class: "remove_fields cut btn btn-danger" do %> 
        <i class="fa fa-trash"></i> 
       <% end %><span id="item"> 
      <%= f.select :name, options_from_collection_for_select(@items, 'name', 'name', f.object.name), {include_blank: "Select Items"}, id: "sel2", class: "select_box" %></span> 
      </td> 
      <td class="invoice_td"><span id="description"><%= f.text_field :description, placeholder: "Description", class: "form-control" %></span></td> 
      <td class="invoice_td"><span id="unit_cost"><%= text_field_tag "unit_cost", f.object.unit_cost, data: {autonumeric: true, aSign: 'USD'}, placeholder: "0.00", class: "form-control" %><%= f.hidden_field :unit_cost, :value => f.object.unit_cost %></span></td> 
      <td class="invoice_td"><span id="quantity"><%= f.number_field :quantity, placeholder: "0", class: "form-control" %></span></td> 
      <td class="invoice_td"> <%= text_field_tag "total", f.object.total, data: {autonumeric: true, aSign: 'USD'}, placeholder: "0.00", class: "form-control" %><%= f.hidden_field :total %></td> 

     </tr> 
     </tbody> 
    </table> 

我試圖完成是一個獨特的類添加到每個TD每一行，所以我可以在日後輕鬆抓住它，併爲貨幣正確格式的單位成本和總。

下面是我使用的CoffeeScript：

$(document).ready -> 
    prices = [] 
    $('.inventory > tbody > tr').each -> 
    activeRow = $(this).index() 
    $('td:nth-child(1) select').addClass 'sel' + activeRow 
    $('.sel' + activeRow).select2() 
    $('td:nth-child(2) input').addClass 'description_' + activeRow 
    $('td:nth-child(3) input:text').addClass 'unit_cost_' + activeRow 
    $('td:nth-child(3) input:hidden').addClass 'unit_cost_hidden_' + activeRow 
    $('td:nth-child(4) input').addClass 'quantity_' + activeRow 
    $('td:nth-child(5) input:text').addClass 'total_' + activeRow 
    $('td:nth-child(5) input:hidden').addClass 'total_hidden_' + activeRow 
    quantity = $('td:nth-child(4) input').val() 
    unit_cost = $('td:nth-child(3) input').val() 
    fixedUnitcost = accounting.unformat(unit_cost)/100 
    total = parseInt(fixedUnitcost, 10) * parseInt(quantity, 10) 
    $('td:nth-child(3) input:text').val accounting.formatMoney(fixedUnitcost) 
    $('td:nth-child(5) input:text').val accounting.formatMoney(total) 
    $('td:nth-child(5) input:hidden').val total 
    $('td:nth-child(3) input:hidden').val accounting.unformat(unit_cost) 
    price = accounting.unformat($(this).find('td:last input').val()) 
    prices.push price 
    sum = prices.reduce(((pv, cv) -> 
    pv + cv 
    ), 0) 
    $('.shown_total').text accounting.formatMoney(sum) 
    totalDue = $('.shown_total').text() 
    amountPaid = $('.amount_paid').text() 
    balanceDue = accounting.unformat(totalDue) - accounting.unformat(amountPaid) 
    $('.balance_due').text accounting.formatMoney(balanceDue) 
    $('.total').val sum * 100 

目前正在發生的事情是，將正確地創建類，但隨後將其添加到所有td元素。

例如：在3行的表頁面加載每個「說明」 TD元素（在表中的第2列）後，將有一類：description_0 DESCRIPTION_1 description_2

我怎樣才能得到它，第一排的TD的有類（也是唯一的類）： description_0，unit_cost_0等

而且第二排的TD的有類： DESCRIPTION_1，unit_cost_1等

我已經工作在此2天，並找不到可行的解決方案。有任何想法嗎？

Answer 1

研究下面的示例，根據需要進行調整並應用。

$('tr:first td').addClass('amount'); 
 

 
$('tr:last td').addClass('discount'); 
 

 
$(function() { 
 

 
    $('.amount').attr('class', function(i) { 
 
    return 'amount' + (i + 1); 
 
    }); 
 

 
    $('.discount').attr('class', function(i) { 
 
    return 'discount' + (i + 1); 
 
    }); 
 

 
});

.amount1, 
 
.amount2, 
 
.amount3, 
 
.discount1, 
 
.discount2, 
 
.discount3 { 
 
    font-size: 24px; 
 
    font-weight: bold; 
 
    font-family: calibri; 
 
} 
 
.amount1 { 
 
    color: maroon; 
 
    font-size: 24px; 
 
    font-weight: bold; 
 
} 
 
.amount2 { 
 
    color: green; 
 
} 
 
.amount3 { 
 
    color: Orange; 
 
} 
 
.discount1 { 
 
    color: black; 
 
} 
 
.discount2 { 
 
    color: gold; 
 
    font-size: 24px; 
 
    font-weight: bold; 
 
} 
 
.discount3 { 
 
    color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table width="200" border="1"> 
 

 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    </tr> 
 
    <tr> 
 
    <td>4</td> 
 
    <td>5</td> 
 
    <td>5</td> 
 
    </tr> 
 

 
</table>

再次：這僅僅是一個例子，研究並根據需要調整;