如何在HTML表格上获得总和？

Question

我正在寻找一种解决方案，以将奔腾的阳光赋予可编辑的html表，例如电子表格：

Answer 1

嗨，这是您想要使用的基本示例：

1. HTML内容的可编辑属性。
2. 将焦点事件附加到表单元格的css类。
3. 一个简单的循环，当一个值更改时，将所有值求和。

$('#tbodyTest >tr').on('focusout', 'td.editable', (e) => {
  let target = $(e.target),
    parent_row = $(e.target).closest('tr'),
    previous_row = parent_row.prev();
  setTimeout(() => {
    if (!isNaN(target.text())) {
		$('#tbodyTest').children('tr').each((i,e)=>{
      $(e).find('td').last().text(Number($(e).find('td:eq(2)').text()) +Number($(e).prev().find('td').last().text()))
    })
    }else{
      target.text("0");
  parent_row.find('td').last().text("0");
  $('#tbodyTest').children('tr').each((i,e)=>{
  $(e).find('td').last().text(Number($(e).find('td:eq(2)').text()) +Number($(e).prev().find('td').last().text()))
})
    }
  })
})

.editable {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="test" border=1>
  <thead>
    <th>date</th>
    <th>desc</th>
    <th>cost</th>
    <th>running sum</th>
  </thead>
  <tbody id="tbodyTest">
    <tr>
      <td>01-01-2019</td>
      <td>a</td>
      <td class="editable" contenteditable='true'>1000</td>
      <td>1000</td>
    </tr>
    <tr>
      <td>01-02-2019</td>
      <td>a</td>
      <td class="editable" contenteditable='true'></td>
      <td></td>
    </tr>
    <tr>
      <td>01-03-2019</td>
      <td>a</td>
      <td class="editable" contenteditable='true'></td>
      <td></td>
    </tr>
    <tr>
      <td>01-04-2019</td>
      <td>a</td>
      <td class="editable" contenteditable='true'></td>
      <td></td>
    </tr>
  </tbody>
</table>

请记住，这是一个基本示例，由于您的询问也很简单，因此您可能会根据需要添加更多内容。

希望有帮助