如何在jQuery实现HTML表格行列求和的函数中使用!isNaN解决NaN问题

• 原代码对所有表格列执行累加，未过滤流水号、客户名这类非数值列，对文本执行parseInt()会返回NaN，累加后整列结果都会变为NaN
• 没有对转换后的数值做有效性校验，无效值直接参与计算
• 原代码未限定遍历范围，表头行也会被纳入遍历逻辑，增加了异常概率

方案1：指定求和列索引（推荐，性能更高、结果可控） #

已知你的表格列索引从0开始依次为：0=交易流水号、1=客户名、2=票据金额、3=银行手续费、4=通讯费，直接指定从索引2开始的列参与求和即可，完整代码如下：

<table class="table" id="table">
<thead>
<tr>
{{!-- <th>Table SN</th> --}}
<th>Transact_SN</th>  
<th>Customer_Name</th>
<th>Ticket_Amount$</th>
<th>Bank_Fee</th> 
<th>Phone_Fee</th>
</tr>
</thead>
<tbody>
 <tr>
 <td>11000</td>
 <td>John</td>
 <td>1000</td>
 <td>100</td>
 <td>10</td>
 </tr>
<tr>
 <td>12000</td>
 <td>Mike</td>
 <td>1500</td>
 <td>500</td>
 <td>20</td>
</tr>
</tbody>
<script>
 $(document).ready(function(){
 var result = [];
 // 只遍历tbody内的业务行，跳过表头
 $('table tbody tr').each(function(){
 $('td', this).each(function(index, val){
  if(!result[index]) result[index] = 0;
  // 仅索引>=2的金额类列参与求和
  if(index >= 2) {
    let num = parseInt($(val).text().trim());
    // 仅有效数值参与累加
    if(!isNaN(num)) {
      result[index] += num;
    }
  } else {
    // 不需要求和的列留空，可按需修改为提示文本
    result[index] = '';
  }
  });
 });
  // 把求和行追加到tbody末尾
  $('table tbody').append('<tr></tr>');
  $(result).each(function(){
  $('table tbody tr').last().append('<td>'+this+'</td>')
  });
 });
</script>

方案2：自动识别数值列（适配列不固定的场景） #

如果表格列顺序、数量不固定，可以自动判断单元格内容是否为有效数值，自动跳过非数值列，只需替换遍历td的逻辑即可：

$('td', this).each(function(index, val){
  if(!result[index]) result[index] = 0;
  let content = $(val).text().trim();
  let num = Number(content);
  // 仅有效数值参与累加
  if(!isNaN(num) && typeof num === 'number') {
    result[index] += num;
  } else {
    result[index] = '';
  }
});

内容的提问来源于stack exchange，提问作者Jason