20180420

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

 

posted on 2018-04-20 18:54  三盛乙烯  阅读(160)  评论(0编辑  收藏  举报

导航