为每行中的每个td添加唯一的类

Add unique class to each td in each row jquery/coffeescript

本文关键字：添加 唯一 td      更新时间：2023-09-26

我试图添加一个唯一的类(使用行索引)到每一行的每个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行表中的每个"description"td元素(表中的第二列)后，将有一个类:描述_0描述_1描述_2

我怎么能得到它，所以第一行的td有类(和只有类):Description_0、unit_cost_0等

第二行的td有类:Description_1, unit_cost_1等

我已经为此工作了2天，找不到一个有效的解决方案。什么好主意吗?

学习下面的例子，根据需要进行调整并应用。

$('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>

再次:这只是一个例子，根据需要学习和调整;

相关文章：