JavaScript显示table中某一列的总数的方法

 时间:2024-10-13 00:14:42

1、首先,我们利用编辑器创建一个简单的表格,HTML代码如下

JavaScript显示table中某一列的总数的方法

2、我们使用浏览器访问一下,效果如图

JavaScript显示table中某一列的总数的方法

3、接下来我们尝试使用JS代码获取示例表格第4行第3列的值,在这里需要注意的时,获取出来的时数组,数组下标是从0开始计算的,代码如下

JavaScript显示table中某一列的总数的方法

4、我们使用浏览器自带的F12开发者工具查看一下console的值,可以发现取值成功,如图

JavaScript显示table中某一列的总数的方法

5、了解怎么操作以后,可以使JS遍历表格的每一行,并获取该行中指定列的值,在把这些撕良滤儆值相加,需要注意的是获取回来的值是字符串格式的,得先转换一下再进行计算,代码如下

JavaScript显示table中某一列的总数的方法

6、再次使用F12工具查看,可以看到已经成功获取了要计算的列的和。

JavaScript显示table中某一列的总数的方法

7、防止重复造轮子,我们把功能封装成函数,方便在需要的时候拿出来调用,代码如下

JavaScript显示table中某一列的总数的方法

8、调用一下刚写好的函数,再使用F12工具看看结果。

JavaScript显示table中某一列的总数的方法

9、总结一下:到这里大家应该了解怎么使用JS计算表格某列的和了,大家可以拓展一下思维,可以发现所有的表格统计都可以套用本案例的方法编写相关的代码。

  • HTML怎么实现上传图片前能够预览
  • php的session如何使用
  • el-dropdown修改菜单弹出位置
  • C#如何输出语句
  • 怎么在VScode中启用导航路径
  • 热门搜索
    饮食安全手抄报内容 英语手抄报内容笑话 以过年为主题的手抄报 拒绝垃圾食品手抄报 感恩手抄报花边 手抄报数学 五年级上数学手抄报 勤俭节约手抄报内容 文明礼仪手抄报模板 节约水资源手抄报