2020-12-03d

最新推荐文章于 2022-03-29 10:00:57 发布

smallITAA

最新推荐文章于 2022-03-29 10:00:57 发布

阅读量54

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/smallITAA/article/details/110573288

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>table</title>
       <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
       <style>
           .checkColor {
               background-color: #98D8F5
           }
           .checkColor2 {
               background-color: #2187E7
           }
       </style>
   </head>
   <body>
       <div align="center" style="margin-bottom:20px;">
           <input id="additem" type="button" name="saveitem" value="行添加" >
           <input id="deleteitem" type="button" name="deleteitem" value="行删除" >
           <input id="reset" type="button" name="reset" value="重置" >
           <input name='rowIndex' type='hidden' id='rowIndex' value="0" />
       </div>
       <table id="dictTbl" align="center" cellspacing="0" cellpadding="25" border="1">
           <tbody customAttr="1">
               <tr>
                   <th>序号</th>
                   <th>姓名</th>
                   <th>存款</th>
                   <th>私房钱</th>
                   <th>合计</th>
                   <th>操作</th>
               </tr>
           </tbody>
           <tbody id="tbody1" customAttr="1">
               <tr>
                   <td>1</td>
                   <td>zs</td>
                   <td>5000.0</td>
                   <td>2.3</td>
                   <td>50.0</td>
                   <td>
                       <a>行添加</a> |
                       <a>行删除</a>
                   </td>
               </tr>
           </tbody>
           <tbody id="tbody2" customAttr="1">
               <tr>
                   <td>2</td>
                   <td>ls</td>
                   <td>12,378.5</td>
                   <td>1,222.5</td>
                   <td>73,218.5</td>
                   <td>
                       <a>行添加</a> |
                       <a>行删除</a>
                   </td>
               </tr>
           </tbody>
           <tbody id="tbody3" customAttr="1">
               <tr>
                   <td>3</td>
                   <td>ww</td>
                   <td>122,350.0</td>
                   <td>22,313.5</td>
                   <td>1,121,250.0</td>
                   <td>
                       <a>行添加</a> |
                       <a>行删除</a>
                   </td>
               </tr>
           </tbody>
           <tbody id="lastTbody" customAttr="1">
               <tr>
                   <td colspan="4" style="text-align: center;">合计</td>
                   <td>150.0</td>
                   <td>
                       <a>行添加</a> |
                       <a>行删除</a>
                   </td>
               </tr>
           </tbody>
       </table>

       <script>
       $(function(){
           //加载选中行变色方法
           loadCheckColor();
           //计算合计值
           caculateTotal();
       })

       //选中行变色
       function loadCheckColor() {
           $("#dictTbl tbody tr").mousedown(function () {
       $('#dictTbl tr').each(function () {
           $(this).removeClass("checkColor");
       });
       $(this).addClass("checkColor");
       var tr = $(this)[0];
               var rowIndex = tr.rowIndex;
               //赋值当前选中行号
       $("#rowIndex").val(rowIndex);
       });
       }

       //计算合计值的方法
       function caculateTotal(){
           //最后一行的总合计
           var lastTbodyTotal = 0.0;

           //遍历table，更改序号
           $("tbody tr").each(function(){
               var tr = $(this)[0];
               var rowIndex = tr.rowIndex;
               var tableLength = $("#dictTbl").find("tr").length;
               if(rowIndex == tableLength-1){
                   //最后一行合计行，不更改序号
                   return;
               }

               //当前行的列数
               var tableTdLength = $(this).find("td").length;
               $(this).parent().attr("id","tbody"+rowIndex);
               $(this).find("td").eq(0).text(rowIndex);//改已有数据的序号
               var td3 = $(this).find("td").eq(tableTdLength-4).text().replace(/[$,]+/g,"");
               var td4 = $(this).find("td").eq(tableTdLength-3).text().replace(/[$,]+/g,"");
               var total = Number(td3) + Number(td4);
               //获取加逗号分割的合计值
               var result = getSplitTotal(total+"");
               $(this).find("td").eq(tableTdLength-2).text(result);//改合计

               lastTbodyTotal += Number($(this).find("td").eq(tableTdLength-2).text().replace(/[$,]+/g,""));
           });
           //赋值总合计值
           var lastTbodyLength = $("#lastTbody").find("tr").find("td").length;

           //获取加逗号的合计值
           var result = getSplitTotal(lastTbodyTotal+"");

           $("#lastTbody").find("tr").find("td").eq(lastTbodyLength-2).text(result);
       }

       //获取加逗号分割的字符串
       function getSplitTotal(lastTbodyTotal){
           //小数点左边字符数字
           var splitLeft = "";
           //小数点右边字符数字
           var splitRight = "";
           if(lastTbodyTotal.indexOf(".") != -1){
               splitLeft = lastTbodyTotal.split(".")[0];
               splitRight = lastTbodyTotal.split(".")[1];
           }else {
               splitLeft = lastTbodyTotal;
               splitRight = "";
           }
           var reverseStr = "";
           var strTemp = "";
           //翻转字符
           for (var i = splitLeft.length-1; i>=0; i--){
               reverseStr += splitLeft.charAt(i);
           }
           //将翻转后的字符每隔3位拼接一个,号
           for (var i = 0; i < reverseStr.length; i++) {
   if (i * 3 + 3 > reverseStr.length) {
   strTemp += reverseStr.substring(i * 3, reverseStr.length);
   break;
   }
   strTemp += reverseStr.substring(i * 3, i * 3 + 3) + ",";
   }
   if (strTemp.endsWith(",")) {
   strTemp = strTemp.substring(0, strTemp.length - 1);
   }
   var reverseStr2 = "";
   //再次翻转字符
           for (var i = strTemp.length-1; i>=0; i--){
               reverseStr2 += strTemp.charAt(i);
           }
           if(splitRight == ""){
               return reverseStr2;
           }
           return reverseStr2 + "." + splitRight;
       }

       //行添加
       function insertRows() {
           //当前选中行号
           var currentRowIndex = $("#rowIndex").val();
           var tbody = $("#tbody"+ currentRowIndex);
           var tbodyHtml = "<tbody><tr><td></td><td></td><td>20.5</td><td>2.5</td><td></td><td><a>行添加</a> | <a>行删除</a></td></tr></tbody>";
           var tr = $(tbodyHtml);
           tbody.after(tr);//拼接到选中行之后

           //加载选中行变色方法
           loadCheckColor();

           //计算合计值
           caculateTotal();

           //遍历table，把添加行的下一行选中变色
           $('#dictTbl tr').each(function () {
               if($(this)[0].rowIndex == (Number(currentRowIndex)+1)){
                   $(this).addClass("checkColor2");
               }else {
                   $(this).removeClass("checkColor2");
               }
   });
       }

       //行删除
       function delTableRow() {
       //当前选中行号
           var currentRowIndex = $("#rowIndex").val();
           var tbody = $("#tbody"+ currentRowIndex);
           if(tbody.attr("customAttr") != null){
               alert("骚瑞，原有数据不能删除！！！");
               return;
           }
           tbody.remove();

           //移除行后，给行号设置为0
           $("#rowIndex").val(0);

           //加载选中行变色方法
           loadCheckColor();

           //计算合计值
           caculateTotal();
       }

       $("#additem").click(function () {
           var tableLength = $("#dictTbl").find("tr").length;
           var rowIndex = $("#rowIndex").val();
           if(rowIndex == 0 || rowIndex == tableLength-1){
               alert("请先选中一行。。。");
               return;
           }
           //console.log("当前选中行号 -> " + rowIndex);
           insertRows();
       })

       $("#deleteitem").click(function () {
           var tableLength = $("#dictTbl").find("tr").length;
           var rowIndex = $("#rowIndex").val();
           if(rowIndex == 0 || rowIndex == tableLength-1){
               alert("请先选中一行。。。");
               return;
           }
           delTableRow();
       })

       //重置
       $("#reset").click(function() {
           window.location.reload();
       })
       </script>
   </body>
</html>

smallITAA

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-12-03d

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>table</title> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <style> ...
复制链接

扫一扫