首页 > 其他分享 >JS获取table中选中某几行其中某一列数值的总和

JS获取table中选中某几行其中某一列数值的总和

时间:2023-04-28 17:24:48浏览次数:34  
标签:function checkbox const 几行 JS table total

JS获取table中选中某几行其中某一列数值的总和 一、思路 1. 如何获取某几行,并且可以实时变化数值?实现如下:

$("input[type='checkbox']").click(function(){
    alert($(this).val());
})

2. 接下来就是实现当每次触发点击事件以后,然后,计算其中的值,实现如下:

<script>
$(function(){
  $("input[type='checkbox']").click(function(){
    var total= getColumnTotal('productStoryForm',8);
    $('#total').html(total);
  })

  function getColumnTotal(tableId, columnIndex) {
    const table = document.getElementById(tableId);
    const rows = table.getElementsByTagName('tr');
    let total = 0;
    for (let i = 0; i < rows.length; i++) {
      const row = rows[i];
      const checkbox = row.getElementsByTagName('input')[0];
      if (checkbox && checkbox.type === 'checkbox' && checkbox.checked) {
        const cells = row.getElementsByTagName('td');
        const cellValue = cells[columnIndex].textContent;
        console.log(cellValue);
        total += parseFloat(cellValue);
      }
    }
    return total;
}
});
</script>

以上就是实现动态计算每一列的值,并且展示在字段上,谢谢学习!!!

标签:function,checkbox,const,几行,JS,table,total
From: https://www.cnblogs.com/wangjinya/p/17362709.html

相关文章

  • 关于json文件想要添加注释怎么处理
    json格式本身不支持注释,json的本意就是极简的通用数据传输。加了备注就不是极简了。1.注释用来说明这个key做什么用2.希望添加注释之后,不会影响原本的交互逻辑。比较好的方法是:json文件里面额外增加一个key"key_comment"用来描述这个key的作用。但是如果本来json文件只是一个......
  • NodeJS定时任务 注:2023-4-28更新
     使用的node-schedule 设置定时任务 引入constschedule=require('node-schedule'); 参数解析schedule.scheduleJob(******)接收六个参数,位置分别如下,如果不需要,填*号即可,*代表通配符6个占位符从左到右分别代表:秒、分、时、日、月、周几*表示通配符,匹配......
  • API 架构风格演化史:CORBA-XMLRPC(SOAP)-REST-JSONRPC-GraphQL-gRPC
    我们先来看一张 TwitterArchitecture2022CodeFirstv.sAPIFirst软件开发理念的改变下图显示了代码优先开发和API优先开发之间的差异。为什么我们要考虑API优先设计?微服务增加了系统的复杂性。我们有单独的服务来服务系统的不同功能。尽管这种体系结构促进了职责的脱钩和分......
  • js中foreach循环无法通过return返回
    varlemonadeChange=function(bills){letfiveCount=0lettenCount=0bills.forEach(element=>{if(element===5){fiveCount+=1}elseif(element===10){if(fiveCount>=1){fiveCount-=1tenCount+=......
  • GMaps.js:让你快速集成 Google Maps 服务的 jQuery 插件
    GMaps.js功能除了添加指定经纬度的标准地图之外,GMaps.js还能定义地图放大的级别,添加标注,获取当前用户的地理位置(HTML5geolocation),定义路线,绘制折线,并且实现这些功能只需要简单的几行代码。另外GMaps.js每个动作都有callback函数让你去集成自定义事件。目前GMaps.js没有详......
  • 【HarmonyOS】【JS】Tabs如何设置区分TabBar和TabContent的分割线不显示
    【关键字】Tabs,分割线 【问题描述】使用JS开发HarmonyOS应用时,使用Tabs组件,默认自带TabBar和TabContent的蓝色分割线,由于蓝色分割线样式不可设置,若不想要此蓝色分割线,如何去除蓝色分割线? 【问题分析】1、若JS使用Tabs,蓝色分割线为组件自带样式,暂不支持属性支持显示与隐藏......
  • Python关于jsonpath路径里面包含中文或进行参数化的解决方案
    jsonpath路径包含中文当jsonpath路径包含中文时,我们只需要在jsonpath路径里面把中文用引号包裹即可准备json文件{"data":[{"Details":[{"姓名":"张三"}]}......
  • jquery.liMarqee.js无缝滚动的使用问题
    引入jq、liMarquee.js和liMarquee.css文件<scriptsrc="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><scriptsrc="./js/jquery.liMarquee.js"></script><linkrel="stylesheet&quo......
  • Dynamic crm 使用JS 更新BPF的stage。
    functionupdateProcess(CurrentRecordId,stageId){ 'usestrict'; varfetchXml=  '<fetch>'+  " <entityname='new_approval_process'>"+  "  <attributename='businessprocessflo......
  • 【策略设计模式详解】C/Java/JS/Go/Python/TS不同语言实现
    简介策略模式(StrategyPattern)属于行为型设计模式。将每一个算法封装到具有共同接口的独立类中,根据需要来绑定策略,使得具体实现和策略解耦。当你想使用对象中各种不同的算法变体,使用if...else所带来的复杂和难以维护,可使用策略模式。或者当有许多相同类,它们仅在执行某些行为时......