我在浏览资料时，发现有很多人都在询问如何使用layui编辑过后怎么让其后面相对应的表格自动计算数据，所以我今天给大家分享一个我对该问题是如何解决的，虽然方法比较笨，但是个人认为能解决问题的方法都是不错的。
因为我个人的项目需求，需要当我修改数量的时候，金额会自动的改变，并且只是影响我修改的那一行金额


然后需要在初始化表格的时候用一下重载的回调，方便我们获取表格的数据


下一步是需要使用layui表格的编辑监听事件，来处理数据，本触发表格重载


需要注意的是图中的Ndata是表格中所有的数据，所有是给List数据，所有这里是要遍历循环给金额赋值
对于数据的处理，重要根据自己项目处理
赋值完后使用layui中的Table.reload的方法进行重载数据表格
其中Url,where为必填
如果是单条数据的重载，可以不用加method:’post’这个属性，但是如果使用的是List数据，或者数组，请千万不要忘记，因为不加，肯定传不到控制器，在下已经试过很多次了，没有一次成功
Page这个属性，如果表格中数据不多，可以不要，如果有分页，肯定得写上
页面的代码基本就解决完成了，
然后就是控制器的接收部分，当然这部分非常简单。
List<T>

其中的T就是用来装Ndata的一个类，具体如何写根据自己的项目来决定


传进来，然后就可以直接传回页面，然后表格就自动计算出你需要的值了
然后我觉得我的方法比较笨，但是这是我唯一想到了并且能用的方法。
倘若是表格单条数据的重载就简单很多了

先来看看实时操作动画演示：

每一行进行小计，数量 X 单价。而总计则是把表格中小计列所有行进行相加。
Html code:

<table id="Order">
    <tr>
        <th>费用名目</th>
        <th>数量</th>
        <th>单价</th>
        <th>小计</th>
    </tr>
    <tr class="trData">
        <td>ItemA</td>
        <td><input type="text" class='txtQuantity' /></td>
        <td><input type="text" class='txtPrice' /></td>
        <td><input type="text" class='txtAmount' /></td>
    </tr>
    <tr class="trData">
        <td>ItemB</td>
        <td><input type="text" class='txtQuantity' /></td>
        <td><input type="text" class='txtPrice' /></td>
        <td><input type="text" class='txtAmount' /></td>
    </tr>
    <tr class="trData">
        <td>ItemC</td>
        <td><input type="text" class='txtQuantity' /></td>
        <td><input type="text" class='txtPrice' /></td>
        <td><input type="text" class='txtAmount' /></td>
    </tr>
    <tr class="trData">
        <td colspan="3" style="text-align:right;">总计</td>        
        <td><span id="total"></span></td>
    </tr>
</table>

Source Code


计算总计：

 
jQuery code:

CalcSum();

        function CalcSum()
        {
            var total_sum = 0;
            $("#Order .txtAmount").each(function () {
                var val = $(this).val();
                if ($.isNumeric(val)) {
                    total_sum += parseFloat(val);
                }                  
            });

            $("#total").html(total_sum);
        }

Source Code
 
数量列任何一个文件框数据变化事件：

 
jQuery code:

 $("#Order").on('input', '.txtQuantity', function () {
            var self = $(this);
            var tr = self.closest("tr");

            var quantity = self.val();
            var Price = tr.find(".txtPrice").val();

            var amount = 0
            if ($.isNumeric(quantity) && $.isNumeric(Price)) {
                amount = quantity * Price;
            }
            tr.find(".txtAmount").val(amount);
            
            CalcSum();
        });

Source Code
 
表中单价列任一文本框数据值变化事件：

 
jQuery code:

$("#Order").on('input', '.txtPrice', function () {
            var self = $(this);
            var tr = self.closest("tr");

            var quantity = tr.find(".txtQuantity").val();
            var Price = self.val();

            var amount = 0
            if ($.isNumeric(quantity) && $.isNumeric(Price)) {
                amount = quantity * Price;
            }            
            tr.find(".txtAmount").val(amount);

            calcSum();
        });

Source Code
 

表格注意点：
如果表格单元width为数值，width表示的是content的宽度；如果表格单元width为百分比，width表示的是content + padding + border的宽度。
表格border-collapse为collapse时，各列含border的列宽之和 >= 实际表格宽度。
固定布局的表格，只有首行的列设置的宽度有效，第二行及之后设置的宽度不起作用；自动布局的表格，所有行的列设置宽度都会影响列的最终宽度。
先设定几个通用的变量：
definedTdWidth：所有定义了宽度（数值、百分比）的列的宽度之和。包含content、border、padding的单元格宽度。
numTdWidth：所有定义了数值宽度（数值、百分比）的列的宽度之和。包含content、border、padding的单元格宽度。
tableWidth：表格宽度
一、表格固定布局
下面的代码将作为固定布局的表格的例子。不同情况会设置不同的样式。
<style>
.table1{table-layout:fixed; border-collapse:collapse; border:1px solid black; }
th{border:1px solid black; padding: 4px;}
</style>
<table class='table1'>
  <tr>
     <th class='col1'>col1col1col1col1第一列</th>
     <th class='col2'>col2col2这是第二列</th>
     <th class='col3'>col3这是第三列。这是第三列。</th>
     <th class='col4'>这是第四列</th>
  </tr>
</table>
1、所有列宽度未定义
1）表格的宽度也没有定义
根据内容的大小来设置表格的宽度（内容长度越长，宽度越长）。但最后表格总宽度不会超出父元素。比如上面这段代码效果如下：

2）表格的宽度已定义
均分宽度，使每列的宽度相等。上面那段代码加上样式：
.table1{width:500px;}
效果如下图所示（宽度均分。可以看到第一列和第二列文字还重叠了，这是默认不允许单词内换行）

2、所有列都定了宽度，同时所有列宽度之和小于表格宽度(definedTdWidth< tableWidth)
实测结果是将表格宽度与列宽和的差值，按每列宽度（含padding、border）所占比分配。即每列加上宽度：（table_width - tdWidth_includeBorder) * （含border的列宽度/tdWidth_includeBorder）（疑问：CSS权威指南上是说两者差值/列数，把这个宽度加到每列上。和实践不一致）
增加样式如下：
.table1{width:600px;}
.col1, .col2{width:40px;}
.col3, .col4{width:100px;}
按照公式计算第一、二列加上差值 = (600 - 320) * (50 / 320) = 43.75。同样方式，第三、四列应加差值96.25。
效果如下图所示。下图中标注的宽度是指实际content的宽度，不包含padding、border。将实际content宽度和定义content宽度相减，差值和按公式计算出来的差不多。
3、所有列都定了宽度，同时所有列宽度之和大于表格宽度(definedTdWidth > tableWidth)
每列的宽度为自身定义的宽度，表格的宽度为所有列宽度总和（会超出表格定义的宽度）
.table1{width:100px;}
.col1, .col2, .col3, .col4{width:150px;}
效果如下图所示。下图中标注的宽度是指content的宽度。
4、部分列定了宽度，同时定了宽度的列的宽度之和小于表格宽度(definedTdWidth< tableWidth)
定义宽度的列的宽度为自身定义的宽度，其他没有定义宽度的列的宽度=（tableWidth - tdWidth_includeBorder）/未定义列数。
增加样式如下：
.table1{width:600px;}
.col1, .col2{width:100px;}
效果如下图所示。下图中标注的宽度是指实际content的宽度。

5、部分列定义了宽度，同时定义了宽度的列的宽度之和 > 表格宽度(definedTdWidth< tableWidth)
定义宽度的列的实际宽度为自身定义的宽度，其他没有定义宽度的列宽度为0。因为未定义宽度的列宽度 = （tableWidth - definedTdWidth） /  未定义宽度的列数。平均分配后的宽度小于零，因此没有定义宽度的列的宽度为0。
设置样式如下：
.table1{width:400px}
.col1,.col2{width:200px}
效果如下图。图中第三列和第四列没有边框，重叠在一块，因为第三、四列宽度为0：

6、部分列宽度是百分比
1）如果部分列宽度是百分比，部分列是数值，且定义数值宽度的列宽度和 > 表格宽度 (definedTdWidth > tableWidth)。
宽度为数值的列先保持，未定义宽度的列宽度值为0。表格宽度与数值宽度列宽度之和的差值，在定义了百分比的列按比例分配。即列宽度 = （tableWidth - numTdWidth） * （列宽度百分比 /  列宽度百分比之和）。如果表格剩下的宽度为0，那宽度是百分比的列的计算宽度为0。
增加样式代码如下：
.table1{width:800px;}
.col1,.col2{width:200px}
.col3{width:50%;}
.col4{width:100%;}
效果如下图所示，第一、二列“content宽度”基本保持定义的宽度（猜测微小的差异应该是跟浏览器计算宽度舍入有关，具体原理不是很清楚)。第三列“实际总宽度”（渲染后实际显示宽度）约等于第四列的1/2。

2）如果全部列都定义了宽度，但部分列宽度是百分比，且定义数值宽度的列宽度和 < 表格宽度(tdWidth_includeBorder > table_width)
将表格宽度减去列宽度和，将差值在百分比宽度的列中分摊，按列百分比宽度占所有百分比之和分配，即列宽度 = （tableWidth - numTdWidth） * （列宽度百分比 /  列宽度百分比之和）。
如果分摊完后，百分比宽度的列宽度已超期百分比对应的值，则修正为按百分比计算的值。接下来再把剩余的宽度按列宽度占比分配到所有列中。
增加样式代码如下：
.table1{width:800px;}
.col1,.col2{width:200px}
.col3{width:10%;}
.col4{width:20%;}
效果如下图所示。下图中第三列“实际总宽度”约等于第四列的1/2。

3）如果部分列定义数值宽度，部分列定义百分比，部分列未定义宽度，且列宽和 < 表格宽度。
将表格宽度减去列宽度和，差值在未定义宽度的列中均分。即列宽度 = （tableWidth - tdWidth_includeBorder）/ 未定义宽度的列数量。
增加样式代码如下：
.table1{width:800px;}
.col1{width:200px;}
.col3{width:10%;}
.col4{width:20%;}
效果如下图所示。
二、表格自动布局
最小列宽度：自动布局中，最小列宽度=max(显示内容所需最小宽度，定义的宽度)。显示内容所需最小宽度是指满足条件下允许的最小宽度（比如词间不允许换行，那所需最小宽度就是最长的词）。
下面的代码将作为自动布局的表格的例子。不同情况会设置不同的样式。
<style>
.table1{table-layout:auto; border-collapse:collapse; border:1px solid black; }
th{border:1px solid black; padding: 4px;}
</style>
<table class='table1'>
  <tr>
     <th class='col1'>col1col1col1col1第一列</th>
     <th class='col2'>col2col2这是第二列</th>
     <th class='col3'>col3这是第三列。这是第三列。</th>
     <th class='col4'>这是第四列</th>
  </tr>
</table>
1、所有列都未定义宽度
每一列的宽度完全由里面的内容所决定。如果设置了表格宽度，表格宽度大于列宽度和，那会把表格宽度与列宽度和的差值按列宽度比例进行分配。
不额外设置样式，效果如下：

2、所有列都定义了宽度，最小列宽度之和<表格宽度
表格宽度与最小列宽度之和差值，按最小列宽度比例进行分配。
增加样式代码如下：
.table1{width:600px;}
.col1, .col2,.col3, .col4{width:40px;}
效果如下图所示：
3、所有列都定义了宽度，最小列宽度之和>表格宽度
计算显示内容所需最小宽度，先保证每列满足内容所需最小宽度。
1)如果内容所需最小宽度和 > 表格宽度，那每列会保持内容所需最小宽度
增加样式如下：
.table1{width:100px;}
.col1, .col2,.col3, .col4{width:120px;}
效果如下图所示。下图中各列的content宽度分别为：第一列134px，第二列67px，第三列34px，第四列16px。

2)如果内容所需最小宽度和 < 表格宽度，那这两者之间的差值会按一定方式分摊到未达到定义宽度的列
计算各列内容所需宽度与定义宽度的差值，记为diff。将表格宽度与最小宽度和的差值按照各列diff比值来分摊。
.table1{width:400px;}
.col1, .col2,.col3, .col4{width:120px;}
效果如下图所示。下图中各列的content宽度分别为：第一列134px，第二列91px，第三列74px，第四列64px。

4、部分列定义了宽度，最小列宽度之和<表格宽度
首先保证各列内容所需最小宽度，然后保证列的百分比宽度，再保证列的数值宽度。如果有剩余，把剩余按内容最大长度（即内容不换行时的长度）分摊到未定义的列。
增加样式如下：
.table1{width:500px;}
.col1, .col4{width:100px;}
效果如图所示，第二、三列未定义宽度，第三列宽度大于第二列。

5、部分列定义了宽度，最小列宽度之和>表格宽度
1)如果内容所需最小宽度和 > 表格宽度，那每列会保持内容所需最小宽度
增加样式如下：
.table1{width:300px;}
.col3, .col4{width:120px;}
效果如下图所示。下图中各列的content宽度分别为：第一列134px，第二列67px，第三列34px，第四列16px。

2)如果内容所需最小宽度和 < 表格宽度，那这两者之间的差值会按一定方式分摊到未达到定义宽度的列
增加样式如下：
.table1{width:300px;}
.col3, .col4{width:120px;}
效果如下图，下图中各列的content宽度分别为：第一列134px，第二列67px，第三列84px，第四列78px。

6、存在列宽度定义为百分比
1）如果最小列宽度和>表格宽度
其他列尽量按内容所需最小宽度显示。内容所需最小宽度和与表格宽度有差值的，这个差值分摊到宽度为百分比的列。
如果百分比总和大于100%，进行修正，从第一个定义百分比的列开始修正：
第一列百分比>100%，第一列修正百分比=100%；
第一列百分比+第二列百分比>100%，第二列修正百分比=(100%-第一列百分比)；
第一列百分比+第二列百分比 + 第三列百分比>100%，第三列修正百分比=(100%-第一列百分比-第二列百分比)
以此类推。
从第一个百分比的列开始分配，定义百分比的列宽度 = min(内容所需最小宽度 + 差值，表格宽度 * 百分比)。
如果第一列加上分摊的值超过了表格宽度*百分比。分摊剩余宽度之前要重新修正百分比，把第二列当成第一列，按照前面的修正方法重新修正。
增加样式如下：
.table1{width:500px}
.col1{width:250px;}
.col2{width:50%}
.col3{width:40%}
.col4{width:60%}
经计算后，第2-4列修正百分比为50%,40%,10%。
效果如下图，下图中各列的content宽度分别为：第一列134px，第二列170px，第三列128px，第四列31px。

2）如果最小列宽度和<表格宽度
在满足内容所需最小宽度的前提下，宽度保持百分比对应的宽度。剩余宽度在定义数值宽度、未定义宽度的列中均摊。
增加样式如下：
.table1{width:800px}
.col1{width:400px;}
.col2,.col4,.col3{width:10%}
效果如下图所示，下图中各列的content宽度分别为：第一列553px，第2-4列70px。

四、总结
1、固定布局
固定布局一定会保证定义数值宽度的列宽度。然后先尽量保持设置了定义百分比宽度的列宽度。最后再设置未定义宽度的列。
定义数值、百分比宽度的列宽度和如果小于表格宽度，会减少百分比宽度的列。如果调整后还是小于，会调大表格宽度，保持数值宽度的列宽度；
定义数值、百分比宽度的列宽度和如果大于表格宽度，会将宽度分摊到未定义宽度的列。如果不存在未定义列，会将按各列宽度占比宽度进行分摊。
2、自动布局
自动布局一定会保证所有列内容所需最小宽度。然后先尽量保持定义百分比宽度的列宽度，再尽量保持定义数值宽度的列宽度。
如果定义数值、百分比宽度的列宽度和大于表格宽度，先缩减到内容所需最小宽度。再将剩余宽度按列修正百分比占总的修正百分比的比值进行分摊。分摊后如果还有剩余百分比宽度，并且有未定义的列，将剩余宽度按列未定义列的内容最大长度（即内容不换行时的长度）比例进行分摊；如果没有未定义的列，将差值按照一定方法来分摊（内容所需宽度与定义宽度的差值比值）到定义数值宽度的列。；
如果定义数值、百分比宽度的列宽度和小于表格宽度，在满足最小内容宽度前提下，尽量保持定义百分比宽度的列宽度。剩余宽度分摊按列内容最大长度（即内容不换行时的长度）比例分配到到未定义的列。如果没有未定义的列，剩余宽度按列宽度所占比分摊到定义数值宽度的列。
五、参考文章
1、关于html表格单元格宽度的计算规则

开发工具与关键技术：VS2015，ASP.NET MVC

撰写时间：2019年 7 月 27 日

先开启layui表格的单元格编辑
在想要开启单元格的列中输入edit:’text’，即可开启单元格编辑
通过监听单元格事件直接获取整行的数据
比如下面的图片中数量就是开启了单元格编辑




在数量单元格中输入数字
在单元格失去焦点的时候就获取一整行的数据
再把需要的值取出来进行计算
再把计算好的值赋值到相对应的单元格
再更新行的数据