jquery手写table行列自动计算（自动计算小计和合计）

最新推荐文章于 2024-02-20 15:17:57 发布

置顶

VIP文章 qq_16063177

最新推荐文章于 2024-02-20 15:17:57 发布

阅读量1w

点赞数 5

分类专栏： table 文章标签：小计合计 js web jquery

本文链接：https://blog.csdn.net/qq_16063177/article/details/78983243

版权

第一次接触这种要涉及行列计算的东西，苦死冥想了一天，也没想出来，上百度搜了搜也没有自己想要的，在17点左右，结果就这样10分钟之内就忽然想出来了，好高兴的！！！

首先，我做的这个功能是大表里面有一个小表，小表可以添加一行，删除其中某行。如下图：

输入数据前：

输入数据后：

可见我在伙食补助里面输入了一个2.25，自动生成了小计2.25和总计2.25元。

我再多输入点数据。。。

可见对着哟

具体代码如下：

html

<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/layui/layui.js"></script>
<script src="/js/jquery-1.11.3.min.js"></script>
<script src="/SysJS/xdDataMange.js"></script>
<script src="js/officialBusiness_baoxiao.js"></script>
<title>报销表</title>
<style type="text/css">
.STYLE1 {
	font-size: 14px;
	border-collapse: collapse;
	margin: 30px auto;
}
.style2 {
	font-size: 14px;
	border-collapse: collapse;
	width: 99%;
}
.STYLE1 tr td, .style2 tr td {
	border: 1px solid #ddd;
	padding: 8px 3px;
}
.style2 tr td.tdHasBg {
	background-color: #f5f5f5;
}
/*
	.style2 tr td.tdCz{
		width:80px;
	}
*/
.STYLE1 tr td.tdContainTn {
	padding: 12px 8px;/*		border:0;*/
}
.text-center {
	text-align: center;
}
.marginTop {
	margin-top: 20px;
}
.baoxiaoinput {
	height: 35px;
	line-height: 1.3;
	line-height: 35px\9;
	border-width: 1px;
	border-style: solid;
	border-color: #c9c9c9;
	background-color: #fff;
	border-radius: 2px;
}
.shengcheng {
	height: 35px;
	line-height: 2.3;
	line-height: 35px\9;
	color: #12C0EC;
}
</style>
</head>

<body>
<h1 class="layui-title marginTop">报销登记表</h1>
<form  class="layui-form" action="" id="XMForm"  method="post">
     <table width="80%" border="0" class="STYLE1">
          <tr>
               <td width="10%" align="center" valign="middle">姓名</t

最低0.47元/天解锁文章

qq_16063177

关注

5
点赞
踩
24

收藏

觉得还不错? 一键收藏
3
评论
jquery手写table行列自动计算（自动计算小计和合计）

第一次接触这种要涉及行列计算的东西，苦死冥想了一天，也没想出来，上百度搜了搜也没有自己想要的，在17点左右，结果就这样10分钟之内就忽然想出来了，好高兴的！！！首先，我做的这个功能是大表里面有一个小表，小表可以添加一行，删除其中某行。如下图：输入数据前：输入数据后：可见我在伙食补助里面输入了一个2.25，自动生成了小计2.25和总计2.25元。我再多输入点数据。
复制链接

扫一扫