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