2020-11-26

序号	姓名	存款	私房钱	合计	操作
1	zs	5000.0	2.3	50.0	行添加 | 行删除
2	ls	12378.5	222.5	73218.5	行添加 | 行删除
3	ww	122350.0	22313.5	121250.0	行添加 | 行删除
合计				150.0	行添加 | 行删除

	<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.toFixed(2)+"");
			$(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;
		
		lastTbodyTotal = lastTbodyTotal + "";
		
		//获取加逗号的合计值
		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);
		}
		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();
	}
	
	//行删除
	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>