<!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=" 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>