组件化的可编辑数据表格

        首先我们进行了可编辑表格的设计，主要思路是将表格功能模块化，我们将表格分解为表头、表身和操作栏三个模块，分别进行组件实现。表头组件包括表头标题和表头列组件，表身组件包括表格数据列表和表格编辑单元格组件，操作栏组件包括新增、编辑、删除等操作按钮组件和分页组件。这样，通过将表格功能模块化，可以更加方便灵活地定制和扩展表格功能，本次可编辑表格的样式通过css实现，通过简单的样式设计，将想要的图形或者不同的板块放在不同的地方。

        设计思路：
在设计组件化的可编辑表格时，我们主要考虑到以下几个方面：

1. 界面交互：用户需要通过明确的交互方式来操作表格并进行数据的编辑和查询；思考用户是否需要某些功能，太繁琐的交互容易产生bug尽量简介的同时能够完成要求的功能。

2. 可扩展性：当需求发生变化时，表格需要能够灵活地进行修改和增强，并能够方便地加入新的功能和模块；

3. 数据完整性：表格需要能够检验并确保输入数据的合法性和完整性，同时需要进行数据校验和数据范围验证；大多数的bug就产生在数据里面，有时候会出现非常理的数值或者数值出现错误。

4. 数据查询和过滤：表格需要可以进行数据的查询和过滤，用户可以根据需求自由选择查询条件。

        核心代码及注解：

        css样式：

<style>
      *{
        list-style: none;
        font-size: 25px;
      }
      #table{
        width: 1200px;
        margin: 0 auto;
        border: 1px solid black;
        margin-top: 30px;
        border-collapse: collapse;
        text-align: center;
      }
      th{
        border: 1px solid black;
      }
      tbody td{
        border: 1px solid black;
      }
      table .add,
      table .dec,
      table .del {
        display: inline-block;
        width: 20px;
        height: 20px;
        cursor: pointer;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
      }
      table .num {
        display: inline-block;
        width: 57px;
        margin: 0 18px;
        height: 39px;
        line-height: 39px;
        border: 1px solid #b0b0b0;
        background: #d4d4d4;
      }
      table .del{
        background-image: url(image/la.png);
      }
      table .add {
        background-image: url(image/s2.png);
      }
      table .dec {
        background-image: url(image/s1.png);
      }
</style>

add事件：

 for (var i = 0; i < oAdds.length; i++) {
          oAdds[i].onclick = function () {
            this.previousElementSibling.innerText =
              parseInt(this.previousElementSibling.innerText) + 1;
            changeMoney();
            changeTotal();
          };
        }

add事件通过一个for循环，对this.previous前一个数值进行增加，使得后面的数值进行加一，就可以通过修改表格内容进行修改需要增加的数量。

计算金额的事件：

function changeMoney() {
          var oListNumber = document.getElementsByClassName("add").length;
          var oNums = document.getElementsByClassName("num");
          var oMoneys = document.getElementsByClassName("money");
          var oPers = document.getElementsByClassName("per");
          var oPerSpan = []; //单价
          var oMoneySpan = []; //金额
          for (var i = 0; i < oListNumber; i++) {
            oPerSpan[i] = oPers[i].getElementsByTagName("span")[0].innerText;
            oMoneySpan[i] = oMoneys[i].getElementsByTagName("span")[0];
            oMoneySpan[i].innerText =
              parseInt(oNums[i].innerText) * parseInt(oPerSpan[i]);
          }
        }

通过add事件或dec事件伴随金额改变事件