html中的行和列的总和

Question

我用html创建了一个表格，从技术上讲，它应该用作电子表格。我需要汇总行并在标记为total的最终单元格上显示total。该表还应在末尾列单元格上对各列进行求和。最好的攻击方法是什么？我研究了jquery并尝试修改更新的现有脚本，但似乎无法获取它来进行计算。这是我设置的html：

video_uploader.rb

Answer 1

从问题中不清楚您想要什么，但是如果您想对表的列和行的值求和，请参考以下示例：

$(document).ready(function() {
  var row = 0,
    col = 0,
    ncol = 0;
  var sum;
  // sum by row
  $("tr").each(function(rowindex) {
    sum = 0;
    col = 0;
    $(this).find("td").each(function(colindex) {
      col++;
      newval = $(this).find("input").val();
      if (isNaN(newval)) {
        $(this).html(sum);
        if (col > ncol) {
          ncol = col - 1
        }
      } else {
        sum += parseInt(newval);
      }
    });
  });

  // sum by col
  for (col = 1; col < ncol + 1; col++) {
    //console.log("column: " + col);
    sum = 0;
    $("tr").each(function(rowindex) {
      $(this).find("td:nth-child(" + col + ")").each(function(rowindex) {
        newval = $(this).find("input").val();
        //console.log(newval);
        if (isNaN(newval)) {
          $(this).html(sum);
        } else {
          sum += parseInt(newval);
        }
      });
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input value="4" />
    </td>
    <td>
      <input value="2" />
    </td>
    <td>
      <input value="3" />
    </td>
    <td class="rowsum">-</td>
  </tr>
  <tr>
    <td>
      <input value="4" />
    </td>
    <td>
      <input value="5" />
    </td>
    <td>
      <input value="6" />
    </td>
    <td class="rowsum">-</td>
  </tr>
  <tr>
    <td>
      <input value="7" />
    </td>
    <td>
      <input value="8" />
    </td>
    <td>
      <input value="9" />
    </td>
    <td class="rowsum">-</td>
  </tr>
  <tr>
    <td class="colsum">-</td>
    <td class="colsum">-</td>
    <td class="colsum">-</td>
  </tr>
</table>

Answer 2

您可以在表内的输入上添加change，keyup和input并循环遍历每个单元格以获取值。

注意：您需要使总输入不可编辑

$(function() {

  //Add an event listener
  $('#ccTable input').bind("change keyup input", function() {

    var colValues = [];                                        //Init the col array

    $('#ccTable tbody tr:not(:last-child)').each(function() {  //Loop thru each row
      var rowValues = 0;                                       //init total of row
      $(this).find('input:not(:last)').each(function(i) {      //Loop thru each input of the row
        var val = +$(this).val() || 0;                         //Get the value of inpunt. If not a number assign 0

        rowValues += val;                                      //Add the value to rowValues 

        colValues[i] = colValues[i] || 0;                      //Init the col to 0
        colValues[i] += val;                                   //Add the value to the col
      })

      //Update row total
      $(this).find('input:last').val(rowValues.toFixed(2));
    });

    //Update col total
    $('#ccTable tbody tr:last-child').find('input:not(:last)').each(function(i) {
      $(this).val(colValues[i].toFixed(2));
    })

    //Sum all colValues and Upate the total/total cell
    var sum = colValues.reduce((c, v) => c + v);
    $('#ccTable tbody tr:last-child').find('input:last').val(sum.toFixed(2));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="ccTable" cellpadding="0" cellspacing="0" border="1" class="table table-striped table-bordered table-hover">
  <thead>
    <tr class="tableHdr">
      <th scope="col" align="right">Days</th>
      <th scope="col">S</th>
      <th scope="col">M</th>
      <th scope="col">T</th>
      <th scope="col">W</th>
      <th scope="col">T</th>
      <th scope="col">F</th>
      <th scope="col">S</th>
      <th scope="col">S</th>
      <th scope="col">M</th>
      <th scope="col">T</th>
      <th scope="col">W</th>
      <th scope="col">T</th>
      <th scope="col">F</th>
      <th scope="col">S</th>
      <th scope="col">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr class="tableRow">
      <td align="right">Dates</td>
      <td>4/29</td>
      <td>4/30</td>
      <td>5/1</td>
      <td>5/2</td>
      <td>5/3</td>
      <td>5/4</td>
      <td>5/5</td>
      <td>5/6</td>
      <td>5/7</td>
      <td>5/8</td>
      <td>5/9</td>
      <td>5/10</td>
      <td>5/11</td>
      <td>5/12</td>
      <td></td>
    </tr>
    <tr class="tableRow">
      <td align="right">In</td>
      <td><input type='text' size="2" class='editable' value='' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
    </tr>
    <tr class="tableRow">
      <td align="right">Out</td>
      <td><input type='text' size="2" class='editable' value='' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
    </tr>
    <tr class="tableRow">
      <td align="right">In</td>
      <td><input type='text' size="2" class='editable' value='' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
    </tr>
    <tr class="tableRow">
      <td align="right">Out</td>
      <td><input type='text' size="2" class='editable' value='' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
    </tr>
    <tr class="tableRow">
      <td align="right">Regular Hours</td>
      <td><input type='text' size="2" class='editable' value='' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
    </tr>
    <tr class="tableRow">
      <td align="right">Vacation</td>
      <td><input type='text' size="2" class='editable' value='' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
    </tr>
    <tr class="tableRow">
      <td align="right">Sick</td>
      <td><input type='text' size="2" class='editable' value='' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
    </tr>
    <tr class="tableRow">
      <td align="right">Holiday</td>
      <td><input type='text' size="2" class='editable' value='' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
    </tr>
    <tr class="tableRow">
      <td align="right">Other</td>
      <td><input type='text' size="2" class='editable' value='' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
    </tr>
    <tr class="tableRow">
      <td style="font-weight:bold" align="right">Total:</td>
      <td><input type='text' size="2" class='editable' value='' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
      <td><input type='text' size="2" class='editable' value='0.00' /></td>
    </tr>
  </tbody>
</table>

Answer 3

我的代码Sample

这是简短而简单的

calculateTable('#ccTable');

function calculate(table, e) {
  return setTimeout(()=>{
    var $rows = $(table).find('tr');

    var data = $rows
    .slice(2,-1)
    .get()
    .map(el =>
         $(el)
         .find('td:not(:first) input')
         .get()
         .map(el => parseFloat($(el).val()) || 0)
        );

    $rows.last()
      .find('td')
      .slice(1)
      .each((index, el) => {
            $(el).find('input')
                .val(data
                    .reduce((acc, val) => acc + val[index], 0)
                .toFixed(2));
        });
  });
}

function calculateTable (target) {
    handler = calculate.bind(null, target)
    $(target).find('input')
            .change(handler)
            .keypress(handler);
  handler();
}