jQueryは従業員情報の追加と削除の機能を実装します

この記事では、従業員情報の追加と削除の機能を実装するためのjQueryの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

従業員テーブルはjQueryイベントを使用して追加されます

メインボタンバインディングイベント

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
    <script type="text/javascript" src="./Demo/script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(関数(){
            //従業員情報ボタンの表示と非表示 button1 バインディングイベント $("#button1").click(function (){
                $("#d1").toggle()
                $("#employeeTable").toggle()
                if($("#d1").is(":hidden")){
                    $("#button1").text("従業員情報を表示")
                }それ以外{
                    $("#button1").text("従業員情報を非表示")
                }
            })
 
            //従業員情報ボタンの表示と非表示 button2 バインディングイベント $("#button2").click(function (){
                $("#f1").トグル()
                $("#formDiv").toggle()
                //ボタンを変更する wordif($("#f1").is(":hidden")){
                    $("#button2").text("追加された従業員情報を表示")
                }それ以外{
                    $("#button2").text("従業員情報の追加を非表示")
                }
            })
 
            //ボタンバインディングテキストクリアイベントをクリアする $("#b1").click(function(){
                $("#name").val("")
            })
            $("#b2").click(function(){
                $("#sex").val("")
            })
            $("#b3").click(function(){
                $("#phone").val("")
            })
            $("#b4").click(function(){
                $("#post").val("")
            })
 
            //従業員情報削除関数再利用作成var detelefun = function () {
                var delete = $(this).parent().parent()
                var tip = detele.find("td:first").text()
                if(confirm("「+tip+」を削除しますか?")){
                    削除する。
                }
                偽を返す
            }
 
 
 
            //ボタンバインディングを追加イベントを追加 $("#button3").click(function (){
                var n = $("#name").val()
                var se=$("#sex").val()
                var ph = $("#phone").val()
                var po = $("#post").val()
                var tab=$("<tr>\n" +
                    " <td>"+n+"</td>\n" +
                    " <td>"+se+"</td>\n" +
                    " <td align=\"center\">"+ph+"</td>\n" +
                    " <td>"+po+"</td>\n" +
                    " <td><a href=\"#\">削除</a> </td><!--従業員情報の削除-->\n" +
                    " </tr>")
                tab.appendTo($("#employeeTable"))
                tab.find("a").click(検索)
            })
 
            //ボタンバインディングイベントを削除します $("a").click(detelefun)
 
        })
 
    </スクリプト>
</head>

従業員データの削除

<本文>
    <div style="position: relative">
        <img src="../img/building.jpg" 幅="1260" 高さ="600" >
       <font style="color: #0044DD" size="30" ><div style="position: absolute;z-index: 2;left: 400px;top: 60px">従業員情報管理へようこそ</div></font>
        <!--タイトル-->
        <button id="button1" style="color: #0050D0; position: absolute;z-index: 6;left: 150px;top: 150px;">従業員情報を表示</button>
        <button id="button2" style="color: #0050D0;position: absolute;z-index: 6;left: 900px;top: 150px">追加された従業員情報を表示</button>
        <!--従業員情報の表示と非表示ボタン-->
    </div><br/>
 
<テーブル id="パネル">
    <div id="d1" style="position: absolute;z-index: 2;left: 150px;top: 180px" hidden="hidden"> <!--従業員情報テーブル-->
        <font size="5" color="blue"><h4>従業員情報</h4></font><!--フォントサイズを決定します-->
        <table hidden="hidden" id="employeeTable" border="1" cellspacing="0" style="background: cornflowerblue;position: absolute;z-index: 2;left: 10px;top: 250px" width="400" >
            <!--テーブルの位置を設定-->
            <tr>
                <td>名前</td>
                <td>性別</td>
                <td align="center">電話番号</td>
                 <td>位置</td>
                  <td></td>
             </tr>
            <tr>
                <td>シャオミン</td>
                <td>男性</td>
                <td align="center">13623233322</td>
                <td>マネージャー</td>
                <td><a href="#" >削除</a> </td><!--従業員情報の削除-->
            </tr>
            <tr>
                <td>張三</td>
                <td>男性</td>
                <td align="center">13727893322</td>
                <td>従業員</td>
                <td><a href="#" >削除</a> </td>
            </tr>
            <tr>
                <td>シャオバイ</td>
                <td>女性</td>
                <td align="center">13727123322</td>
                <td>従業員</td>
                <td><a href="#" >削除</a> </td>
            </tr>
         </テーブル>
    </div>
 
 
    <font id="f1" hidden="hidden" size="5" style=" color: blue;position: absolute;z-index: 2;left: 900px;top: 180px"><h4>従業員情報を追加する</h4></font>
    <table id="formDiv" hidden="hidden" border="1" cellspacing="0" style="background: cornflowerblue;position: absolute;z-index: 2;left: 820px;top: 250px" width="300 ">
       <!--従業員情報を追加-->
        <tr>
            <td>名前</td>
            <td><input type="text" id="name"> </td>
            <td><button id="b1">クリア</button> </td><!--テキストをクリア-->
        </tr>
        <tr>
            <td>性別</td>
            <td><input type="text" id="性別" > </td>
            <td><button id="b2">クリア</button> </td>
        </tr>
        <tr>
            <td>電話</td>
            <td><input type="text" id="phone" > </td>
            <td><button id="b3">クリア</button> </td>
        </tr>
        <tr>
            <td>位置</td>
            <td><input type="text" id="post" > </td>
            <td><button id="b4">クリア</button> </td>
        </tr>
        <tr><td colspan="3" align="center"><button id="button3">追加</button></td></tr>
    </テーブル>
 
 
</テーブル>
</本文>
</html>

jQuery の toggle() を使用して非表示と表示を行い、if(is(":hidden")) を使用して次の操作を実行します。情報が非表示の場合、ボタンには表示情報が表示され、情報が表示される場合、ボタンのテキストには非表示情報が表示されます。