<!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
}
</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>12378.5</td>
<td>222.5</td>
<td>73218.5</td>
<td>
<a>行添加</a> |
<a>行删除</a>
</td>
</tr>
</tbody>
<tbody id="tbody3" customAttr="1">
<tr>
<td>3</td>
<td>ww</td>
<td>122350.0</td>
<td>22313.5</td>
<td>121250.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.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>
</html>