<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/JQ3.3.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/control/js.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<script type="text/javascript">
$(function() {
//$("td:eq(21)").attr("class","txt");//这是一种办法
//$("table").find("tr").eq(1).find("td").eq(0).attr("class","txt");//这是一个万金油式的选择器！
//$("#Salary").attr("class", "txt");
//$("tr:last").attr("class", "txt");
})
</script>
<body>
<div class="col-lg-13" style="border: 2px solid red;" style="overflow:scroll;">
<div>
<table class="table table-striped table-bordered" style="width: 1500px; overflow:scroll;">
<!--table-striped表示隔行变色效果，table-bordered表示表格加边框-->
<tr style="overflow:scroll;">
<th width="500px">序号</th>
<th width="500px">所属部门</th>
<th width="500px">姓名</th>
<th>基本工资</th>
<th>提成工资</th>
<th>绩效工资</th>
<th>伙食补贴</th>
<th>工龄补贴</th>
<th>交电补贴</th>
<th>岗位津贴</th>
<th>全勤奖</th>
<th>出勤天数（天）</th>
<th>迟到</th>
<th>事假</th>
<th>旷工</th>
<th>应发工资（元）</th>
<th><font color="red">社保</font></th>
<th><font color="red">个人所得税</font></th>
<th>其他</th>
<th>实发工资（元）</th>
<th>备注</th>
</tr>
<tr id="viceTable">
<td> <input type="checkbox" id="empNum" />1</td>
<td>
<select>
<option selected="selected" style="display: none;">请选择</option>
<option>上沙河</option>
<option>幸福路测绘局</option>
<option>青年路国土</option>
<option>人大秘书处</option>
<option>兵团档案局</option>
<option>米东区农牧局</option>
</select>
</td>
<td> <input type="text" class="form-control" id="name"> </td>
<td> <input type="text" class="form-control" id="baseSal"> </td>
<td> <input type="text" class="form-control" id="raiseSal"> </td>
<td> <input type="text" class="form-control" id="perSal"> </td>
<td> <input type="text" class="form-control" id="foodSub"> </td>
<td> <input type="text" class="form-control" id="ageSub"> </td>
<td> <input type="text" class="form-control" id="traSub"> </td>
<td> <input type="text" class="form-control" id="depSub"> </td>
<td> <input type="text" class="form-control" id="reward"> </td>
<td> <input type="text" class="form-control" id="days"> </td>
<td> <input type="text" class="form-control" id="late"> </td>
<td> <input type="text" class="form-control" id="leave"> </td>
<td> <input type="text" class="form-control" id="absenteeism"> </td>
<td> <input type="text" class="form-control" id="nominalSal"> </td>
<td> <input type="text" class="form-control" id="socialSec" style="color: red;"> </td>
<td> <input type="text" class="form-control" id="tax" style="color: red;"> </td>
<td> <input type="text" class="form-control" id="others"> </td>
<td> <input type="text" class="form-control" id="Salary" onclick="funadd()"> </td>
<td> <input type="text" class="form-control" id="remarks"> </td>
</tr>
</table>
</div>
<script type="text/javascript">
function funadd() {
//总和
var baseSal = $("#baseSal"); //基本工资
var raiseSal = $("#raiseSal"); //提成工资
var perSal = $("#perSal"); //绩效工资
var foodSub = $("#foodSub"); //伙食补贴
var ageSub = $("#ageSub"); //工龄补贴
var traSub = $("#traSub"); //交电补贴
var depSub = $("#depSub"); //岗位津贴
var reward = $("#reward"); //全勤奖
var days = $("#days"); //出勤天数
var late = $("#late"); //迟到
var leave = $("#leave"); //事假
var absenteeism = $("#absenteeism"); //旷工
var nominalSal = $("#nominalSal"); //应发工资
var socialSec = $("#socialSec"); //社保
var tax = $("#tax"); //个人所得税
var others = $("#others"); //其他
var sum = (baseSal.val()-0) +
(raiseSal.val()-0) +
(perSal.val()-0) +
(foodSub.val()-0) +
(ageSub.val()-0) +
(traSub.val()-0) +
(depSub.val()-0) +
(reward.val()-0) +
(days.val()-0) +
(late.val()-0) +
(leave.val()-0) +
(absenteeism.val()-0) +
(nominalSal.val()-0) +
(socialSec.val()-0) +
(tax.val()-0) +
(others.val()-0);
$("#Salary").val(sum);
}
</script>
<script type="text/javascript">
$(function() {
$("#addOneRow").click(function() {
var tempTr = $("tr:last").clone(true); //克隆最后一行，即初始时的输入行
$("tr:last").after(tempTr); //模仿最后一行，添加一行
var i = parseInt($('tr:last td:first').text(), 10);
$('tr:last td:first').text(i + 1); //最后一行的第一列输出数字i
//$('tr:last td:first').append("<input type="checkbox" id="empNum" />");
$("tr:last > td > #empNum").val("2");
$("tr:last > td > #dep").val("");
$("tr:last > td > #name").val("");
$("tr:last > td > #baseSal").val("");
$("tr:last > td > #raiseSal").val("");
$("tr:last > td > #perSal").val("");
$("tr:last > td > #foodSub").val("");
$("tr:last > td > #ageSub").val("");
$("tr:last > td > #traSub").val("");
$("tr:last > td > #depSub").val("");
$("tr:last > td > #reward").val("");
$("tr:last > td > #days").val("");
$("tr:last > td > #late").val("");
$("tr:last > td > #leave").val("");
$("tr:last > td > #absenteeism").val("");
$("tr:last > td > #nominalSal").val("");
$("tr:last > td > #socialSec").val("");
$("tr:last > td > #tax").val("");
$("tr:last > td > #others").val("");
$("tr:last > td > #Salary").val("");
$("tr:last > td > #remarks").val("");
});
$("#delOneRow").click(function() {
if($("tr").length < 3) {
alert("至少保留一行!");
} else {
if(confirm("确认删除?")) {
$("#viceTable").remove();
}
}
});
});
</script>
<!--<script type="text/javascript">
function funadd(){
var base = $("#baseSal");
//console.log(base.val());
var raise = $("#raiseSal");
//console.log(raise.val());
var perSal = $("#perSal");
//console.log((base.val()-0)+(raise.val()-0));
sum = (base.val()-0)+(raise.val()-0)+(perSal.val()-0);
console.log((perSal.val()-0));
console.log(sum);
$("#Salary").val(sum);
}
</script>-->
<div> <button type="button" class="btn btn-primary" id="addOneRow">添加行</button>
<button type="button" class="btn btn-danger" id="delOneRow">删除行</button>
<button type="button" class="btn btn-danger" id="test" onclick="funadd()">测试</button>
</div>
</div>
</body>
</html>
