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添加一个唯一的类，这样我以后就可以轻松抓住它并将单位成本和总数正确地格式化为货币。

这是我用过的咖啡因：

$(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元素。

例如：页面加载每个＆＃34;描述＆＃34;具有3行的表中的td元素（表中的第2列）将具有以下类：description_0 description_1 description_2

我怎样才能得到它，以便第一行有类（而且只有类）： description_0，unit_cost_0等

第二排的课程有： description_1，unit_cost_1等

我已经为此工作了2天，但却无法找到有效的解决方案。任何想法？

Answer 1

研究以下示例，根据需要进行调整并应用。

＆＃13;

$('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);
  });

});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

再次

：这只是一个例子，根据需要进行研究和调整;

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

1 个答案: