<!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/test.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");
})
</script>
<body>
<div class="col-lg-13" style="border: 2px solid red;">
<div>
<table class="table table-striped table-bordered">
<!--table-striped表示隔行变色效果，table-bordered表示表格加边框-->
<tr>
<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>
<th>旷工</th>
<th>应发工资（元）</th>
<th>社保</th>
<th>个人所得税</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"> </td>
<td> <input type="text" class="form-control" id="tax"> </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 = document.getElementById("baseSal").value; //基本工资
console.log(baseSal);
var raiseSal = parseInt($("#raiseSal").text(), 10); //提成工资
var perSal = parseInt($("#perSal").text(), 10); //绩效工资
var foodSub = parseInt($("#foodSub").text(), 10); //伙食补贴
var ageSub = parseInt($("#ageSub").text(), 10); //工龄补贴
var traSub = parseInt($("#traSub").text(), 10); //交电补贴
var depSub = parseInt($("#depSub").text(), 10); //岗位津贴
var reward = parseInt($("#reward").text(), 10); //全勤奖
var days = parseInt($("#days").text(), 10); //出勤天数
var late = parseInt($("#late").text(), 10); //迟到
var leave = parseInt($("#leave").text(), 10); //事假
var absenteeism = parseInt($("#absenteeism").text(), 10); //旷工
var nominalSal = parseInt($("#nominalSal").text(), 10); //应发工资
var socialSec = parseInt($("#socialSec").text(), 10); //社保
var tax = parseInt($("#tax").text(), 10); //个人所得税
var others = parseInt($("#others").text(), 10); //其他
var sum = baseSal + raiseSal + perSal + foodSub + ageSub + traSub + depSub + reward + days + late + leave + absenteeism + nominalSal + socialSec + tax + others;
$("#Salary").text(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 test(){
alert("nihao");
}
</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>
