Question

我有一个表格，其中包含可变的数据输入字段，这些字段是在搜索特定数据时显示的，最终它是收银机的视图以及它们全天提取的现金和信用额度。我真的需要能够总计每次执行搜索时提出的数据，这将是列的总数。另外，我需要找到每一行的差异。（有时每个抽屉里的现金数量并不完全是每个收银员实际放入抽屉的数量，通常会有几美分差异。）所以我也需要计算。如果你转到这个链接，你会看到我的桌子到底是什么样的以及我想要做什么。 http://64.92.143.227/monee/cash.html 我尝试过来自这个网站的多个javascript代码，我似乎无法工作。我是javascript的新手，所以任何帮助都会很棒！谢谢！

以下是该表的代码：

               <tr>
               <th> </th>
               <th>STATUS </th>
               <th>QTY </th>
               <th>COUNT </th>

               <th>+/- </th>

            </tr>
                     <tr><td>CASH </td><td>
                              <div class="tleft"></div>
                              <input style="width: 100px;height: 17px;" id="cash_in"  value=""/>
                              </td>
                              <td>
                              <div class="tleft"><input style="width: 100px;height: 17px;"
     id="no_cash"  value=""/></div>
                              </td>

                              <td>
                              <div class="tleft"><input style="width: 100px;height: 17px;"
 id="cash_count" value=""/></div>
                              </td>
                              <td>
                              <div class="tleft"><input style="width: 100px;height: 17px;" 
id="ttl_cash" value=""/></div>
                              </td></tr>
                     <tr><td>CHECK </td><td>
                              <div class="tleft"></div>

                             <input style="width: 100px;height: 17px;" id="check_in" value=""/>

                             </td>
                              <td>
                              <div class="tleft"><input style="width: 100px;height:  
17px;"id="no_checks " value=""/></div>
                              </td>
                              <td>
                              <div class="tleft"><input style="width: 100px;height: 17px;" 
id="check_count" value=""/></div>
                              </td>

                              <td>
                              <div class="tleft"><input style="width: 100px;height: 17px;" 
id="ttl_check" value=""/></div>

                          </td>
                          </tr>
                 <tr><td>CHARGE </td><td>
                          <div class="tleft"></div><input style="width: 100px;height: 17px;" id="credit_in" value="" OnTextChanged="javascript:calc()"/>
                          </td>
                          <td>

                          <div class="tleft"><input style="width: 100px;height: 17px;" id="no_charge" value=""/></div>
                          </td>

                          <td>
                          <div class="tleft"><input style="width: 100px;height: 17px;" id="charge_count" value=""/></div>
                          </td>
                          <td>
                          <div class="tleft"><input style="width: 100px;height: 17px;" id="ttl_charge" value=""/></div>
                          </td>

                          </tr>
                 <tr><td>ACCOUNT </td><td>

                          <div class="tleft"><input style="width: 100px;height: 17px;" id="voucher_in" value=""/></div>
                          </td>
                          <td>
                          <div class="tleft"><input style="width: 100px;height: 17px;" id="no_voucher" value=""/></div>
                          </td>
                          <td>

                          <div class="tleft"><input style="width: 100px;height: 17px;" id="voucher_count" value=""/></div>
                          </td>
                          <td>

                          <div class="tleft"><input style="width: 100px;height: 17px;" id="ttl_account" value=""/></div>
                          </td>
                          </tr>
                 <tr><td>GIFT CERT </td><td>
                          <div class="tleft"><input style="width: 100px;height: 17px;" id="tender6_in" value=""/></div>

                          </td>
                          <td>
                          <div class="tleft"><input style="width: 100px;height: 17px;" id="no_tender6" value=""/></div>

                          </td>
                          <td>
                          <div class="tleft"><input style="width: 100px;height: 17px;" id="tender6_count" value=""/></div>
                          </td>
                          <td>

                          <div class="tleft"><input style="width: 100px;height: 17px;" id="ttl_giftcert" value=""/></div>
                          </td>
                          </tr>
                 <tr><td>BUYBACK </td><td>

                          <div class="tleft"><input style="width: 100px;height: 17px;" id="buyback_in" value=""/></div>
                          </td>
                          <td>
                          <div class="tleft"><input style="width: 100px;height: 17px;" id="no_buyback" value=""/></div>

                          </td>
                          <td>
                          <div class="tleft"><input style="width: 100px;height: 17px;" id="buyback_count" value=""/></div>
                          </td>
                          <td>

                          <div class="tleft"><input style="width: 100px;height: 17px;" id="ttl_buyback" value=""/></div>
                          </td>
                          </tr>

                 <tr><td>CASH CARD </td><td>
                          <div class="tleft"><input style="width: 100px;height: 17px;" id="csh_card_in" value=""/></div>
                          </td>
                          <td>
                          <div class="tleft"><input style="width: 100px;height: 17px;" id="no_csh_card" value=""/></div>

                          </td>
                          <td>
                          <div class="tleft"><input style="width: 100px;height: 17px;" id="csh_card_count" value=""/></div>

                          </td>
                          <td>
                          <div class="tleft"><input style="width: 100px;height: 17px;" id="ttl_csh_card" value=""/></div>
                          </td>
                          </tr>
                 <tr><td>TOTAL </td><td>

                          <div class="tleft"></div>
                         <input style="width: 100px;height: 17px;" id="ttl_status;" value=""/>

                          </td>
                          <td>
                          <div class="tleft"><input style="width: 100px;height: 17px;" id="ttl_qty" value=""/></div>
                          </td>
                          <td>
                          <div class="tleft"><input style="width: 100px;height: 17px;" id="ttl_count" value=""/></div>
                          </td>
                          <td>

                          <div class="tleft"><input style="width: 100px;height: 17px;" id="ttl_ttl" value=""/></div>
                          </td>
                          </tr>
                       </table>

Answer 1

使用类标记表的每个td及其列号。例如：

<tr>
    <td class="col1"> ... </td>
    <td class="col2"> ... </td>
    <td class="col3"> ... </td>
</tr>

使用这些列类可以更容易地垂直枚举。以下是每当输入更改时为第一列构建“总计”值的示例：

$(document).ready(function() {
    var col1_inputs = $('td.col1 input');
    var col1_total = $('td#col1_total input');

    col1_inputs.change(function() {
        var total = 0;

        col1_inputs.each(function(idx, el) {
            var cell_value = parseInt(el.value, 10);

            if ( !isNaN(cell_value) )
                total += cell_value;
        });

        col1_total.val(total);
    });
});

jsFiddle

Answer 2

修改

下面的代码只是总结每个列，我现在看到你想要做的不仅仅是这个。您应该能够调整代码以执行您想要的操作。一些示例数据和计算会有所帮助。

原始

您可以使用单元格的索引来添加它们，例如

var totalTable = (function() {

  // Specific functions so keep private
  function getCellValue(cell) {
    var input = cell.getElementsByTagName('input')[0];
    return input && +input.value || 0;
  }

  function setCellValue(cell, value) {
    var input = cell.getElementsByTagName('input')[0];
    input.value = value;
  }

  return function (id) {
    var table = document.getElementById(id)
    if (!table) return;

    var rows = table.rows;
    var sums = [];
    var cell, cells;

    // Initialise sums
    var i = rows[0].cells.length;
    while (i--) sums[i] = 0;

    // Skip the first and and last rows
    for (var i=1, iLen=rows.length - 1; i<iLen; i++) {
      cells = rows[i].cells;

      for (var j=1, jLen=cells.length; j<jLen; j++) {
        sums[j] += getCellValue(cells[j]);
      }
    }

    // Put totals in the last row
    cells = rows[i].cells;
    j = cells.length;

    while (--j) {
      setCellValue(cells[j], sums[j]);
    }
  }
}());

请注意，您可能希望对总和进行一些格式化（在写出值时执行此操作）并验证单元格的值（在 getCellValue 函数中执行此操作）

变量输入html表上的总计列

2 个答案:

修改

原始