封装表格table列求和方法

本是古典何须时尚 2022-06-16 12:36 252阅读 0赞

<!DOCTYPE html >

< html >

< head >

< title ></ title >

</ head >

< body >

< table width= "200" border= "0"  id= "table" >

< tr >

< td >名称 </ td >

< td >图片 </ td >

< td >价格 </ td >

< td >操作 </ td >

</ tr >

< tr >

< td > </ td >

< td > </ td >

< td >10 </ td >

< td > </ td >

</ tr >

< tr >

< td > </ td >

< td > </ td >

< td >10 </ td >

< td > </ td >

</ tr >

< tr >

< td > </ td >

< td > </ td >

< td >10 </ td >

< td > </ td >

</ tr >

< tr >

< td > </ td >

< td > </ td >

< td >10 </ td >

< td > </ td >

</ tr >

< tr >

< td > </ td >

< td >合计 </ td >

< td > </ td >

< td > </ td >

</ tr >

</ table >

< script type= "text/javascript" >

var calcTotal= function( table, column)\{ //合计，表格对象，对哪一列进行合计，第一列从0开始

var trs= table. getElementsByTagName( 'tr');

var start= 1, //忽略第一行的表头

end= trs. length\- 1; //忽略最后合计的一行

var total= 0;

for( var i= start; i< end; i\++)\{

var td= trs\[ i\]. getElementsByTagName( 'td')\[ column\];

var t= parseFloat( td. innerHTML);

if( t) total\+= t;

\}

trs\[ end\]. getElementsByTagName( 'td')\[ column\]. innerHTML= total;

\};

calcTotal( document. getElementById( 'table'), 2);

</ script >

</ body >

</ html >

发表评论取消回复

表情：

评论列表（有 0 条评论，252人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery计算表格列，求和

jquery计算表格列，求和有时候，需要统计网页上数据总数，系统没有提供该功能，需要手动计算，于是设计了这段代码效果展示： ![watermark_type_ZHJv

客官°小女子只卖身不卖艺/ 2023年10月02日 10:06/ 0 赞/ 4 阅读

相关 Element UI Table表格封装

说明针对Element UI table进行了简单封装，支持复杂表头、分页、跨行等。主要封装内容如下： pagination：是否分页，默认true co

冷不防/ 2023年01月22日 15:59/ 0 赞/ 454 阅读

相关 ElementUI table表格列动态渲染

一、概述一般写table时，列都是固定。现有业务需求，列是不固定的。根据api返回的数据，进行动态渲染。官方table示例，链接如下： [https://elem

向右看齐/ 2023年01月17日 08:25/ 0 赞/ 458 阅读

相关 elementUI中table表格列实现拖拽

1、首先，需要执行`npm install sortablejs --save-dev` 安装sortable.js 2、在页面内引入 <template> <d

末蓝、/ 2022年12月16日 09:03/ 0 赞/ 447 阅读

相关 antdvue表格table封装组件（包含可伸缩列）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

r囧r小猫/ 2022年10月15日 11:59/ 0 赞/ 793 阅读

相关封装表格table列求和方法

<!DOCTYPE html > < html > < head > < title ></ title > </ head > < body > < table

本是古典何须时尚/ 2022年06月16日 12:36/ 0 赞/ 253 阅读

相关封装一个每列带有search的表格

利用element ui 的自定义的头部实现，效果： ![这里写图片描述][70] 代码： <template> <div class='sear

本是古典何须时尚/ 2022年05月17日 06:23/ 0 赞/ 246 阅读

相关 table表格列随鼠标高亮显示

前言在表格开发中，有时因为表格列数较多，需要表格的列随着鼠标的移动高亮显示，方便查看，如下图（配合行高亮显示）![在这里插入图片描述][watermark_type_Z

怼烎@/ 2022年04月17日 07:15/ 0 赞/ 478 阅读

相关 jsp页面中表格每列求和

@Controller @RequestMapping("/test") public class MyController {

╰半夏微凉°/ 2021年09月26日 15:44/ 0 赞/ 522 阅读

相关 html table 表格行合并列合并

目录 1.表格边框合并 2、行合并 3、列合并 -------------------- 表格：table 行：tr 列：td 属性：

客官°小女子只卖身不卖艺/ 2021年09月03日 10:48/ 0 赞/ 816 阅读