jquery實現table增刪改


html代碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>增刪改</title>
    <link rel = "stylesheet" type="text/css" href="css/index.css"/>
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/index.js"></script>
</head>
<body>

    <!--添加,全選,反選,取消按鈕-->
    <div class="btn">
        <input type="button" value="添加" class="one"/>
        <input type="button" value="全選" class="one"/>
        <input type="button" value="反選" class="one"/>
        <input type="button" value="取消" class="one"/>
    </div>
    <!--結束-->

    <!--員工信息表-->
    <div class="tab">
        <table border="1">
            <tr>
                <th>選擇</th>
                <th>員工姓名</th>
                <th>員工年齡</th>
                <th>員工職位</th>
                <th>編輯</th>
                <th>刪除</th>
            </tr>

            <tr>
                <td><input type="checkbox" class="checkbox"/></td>
                <td>alex</td>
                <td>38</td>
                <td>ceshi</td>
                <td><a class="edit" href="#">編輯</a></td>
                <td><a class="delete" href="#">刪除</a></td>
            </tr>

            <tr>
                <td><input type="checkbox" class="checkbox"/></td>
                <td>egon</td>
                <td>38</td>
                <td>kaifa</td>
                <td><a class="edit" href="#">編輯</a></td>
                <td><a class="delete" href="#">刪除</a></td>
            </tr>

            <tr>
                <td><input type="checkbox" class="checkbox"/></td>
                <td>wupeiqi</td>
                <td>38</td>
                <td>kaifa</td>
                <td><a class="edit" href="#">編輯</a></td>
                <td><a class="delete" href="#">刪除</a></td>
            </tr>

            <tr>
                <td><input type="checkbox" class="checkbox"/></td>
                <td>yuanhao</td>
                <td>38</td>
                <td>kaifa</td>
                <td><a class="edit" href="#">編輯</a></td>
                <td><a class="delete" href="#">刪除</a></td>
            </tr>

        </table>
    </div>
    <!--結束-->

    <!--遮罩-->
    <div class="shade hide"></div>
    <!--結束-->

    <!--彈出表單-->
    <div class="add_form hide">
        <form id="form1" action="">
            <label for="empname">員工姓名:</label><input type="text" id="empname" name="empname"/><br>
            <label for="empage">員工年齡:</label><input type="text" id="empage" name="empage"/><br>
            <label for="emp_position">員工職位:</label><input type="text" id="emp_position" name="emp_position"/><br>
            <br>
            <input type="button" value="保存" id="save"/>
            <input type="button" value="取消" id="cancel"/>
        </form>
    </div>

    <div class="edit_form hide">
        <form id="form11" action="">
            <label for="empname1">員工姓名:</label><input type="text" id="empname1" name="empname1"/><br>
            <label for="empage1">員工年齡:</label><input type="text" id="empage1" name="empage1"/><br>
            <label for="emp_position1">員工職位:</label><input type="text" id="emp_position1" name="emp_position1"/><br>
            <br>
            <input type="button" value="保存" id="save1"/>
            <input type="button" value="取消" id="cancel1"/>
        </form>
    </div>
    <!--結束-->
</body>
</html>
css代碼.btn{    margin-top:20px;    margin-left: 400px;}.tab table{    line-height: 40px;    margin-left: 400px;    margin-top: 20px;    background-color: wheat;    text-align: center;    width: 600px;}.tab table a{    text-decoration: none;}.tab table a:hover{    color:red;}.hide{    display: none;}.shade{    position: fixed;    top: 0;    bottom: 0;    left: 0;    right: 0;    background-color: darkgray;    opacity: 0.4;}.add_form{    margin-left: 500px;    margin-top: 100px;    width: 460px;    height: 300px;    position: absolute;}.edit_form{    margin-left: 500px;    margin-top: 100px;    width: 460px;    height: 300px;    position: absolute;}jquery代碼/** * Created by hyh on 2017/8/8. */$(document).ready(function(){   $(document).on('click','.one',function(){       if($(this).val() == "添加"){           $(".shade").removeClass("hide");           $(".add_form").removeClass("hide");           $(".edit_form").addClass("hide");           $(".btn").addClass("hide");           $(".tab").addClass("hide");       }       else if($(this).val() == "全選"){            $(".checkbox").prop("checked",true);       }       else if($(this).val() == "反選"){           $(".checkbox").each(function(){               $(this).prop("checked", !$(this).prop("checked"));           });       }       else{           $(".checkbox").each(function(){               $(this).prop("checked",false);           });       }   });   $(document).on('click','.edit',function(e){       e.preventDefault();       var inx = $(this).parent().parent().index();       // alert(inx);       var empname=$(this).parent().parent().children().eq(1).text();       var empage=$(this).parent().parent().children().eq(2).text();       var emp_position=$(this).parent().parent().children().eq(3).text();       $("#empname1").prop("value",empname);       $("#empage1").prop("value",empage);       $("#emp_position1").prop("value",emp_position);       $(".btn").addClass("hide");       $(".tab").addClass("hide");       $(".add_form").addClass("hide");       $(".shade").removeClass("hide");       $(".edit_form").removeClass("hide");       $("#save1").click(function(){            // alert(inx);           empname = $("#empname1").val();           empage = $("#empage1").val();           emp_position = $("#emp_position1").val();           $("table").children().children().eq(inx).children().eq(1).text(empname);           $("table").children().children().eq(inx).children().eq(2).text(empage);           $("table").children().children().eq(inx).children().eq(3).text(emp_position);           $(".btn").removeClass("hide");           $(".tab").removeClass("hide");           $(".shade").addClass("hide");           $(".edit_form").addClass("hide");           $(".add_form").addClass("hide");       });   });   $("#save").click(function(){               var empname = $("#empname").val();               var empage = $("#empage").val();               var emp_position = $("#emp_position").val();               var htmlStr='<tr>'+                '<td><input type="checkbox" class="checkbox"></td>'+                '<td>'+empname+'</td>'+                '<td>'+empage+'</td>'+                '<td>'+emp_position+'</td>'+                '<td><a class="edit" href="#">編輯</a></td>'+                '<td><a class="delete" href="#">刪除</a></td>'+            '</tr>';                $("#empname").val('');                $("#empage").val('');                $("#emp_position").val('');               $("table").append(htmlStr);               $(".btn").removeClass("hide");               $(".tab").removeClass("hide");               $(".add_form").addClass("hide");               $(".edit_form").addClass("hide");               $(".shade").addClass("hide");   });   $(document).on('click','.delete',function(e){       e.preventDefault();       var inx = $(this).parent().parent().index();       // alert(inx);       $(this).parent().parent().remove();   });});


本文出自 “linux技術” 博客,請務必保留此出處http://haoyonghui.blog.51cto.com/4278020/1954584


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com