javascript(四)

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <style>
        select{
            width:100px;
            height:140px;
        }
        div{
            width:130px;
            float:left;
            text-align:center;
        }
    </style>
    <!--引入jQuery库-->
    <script type="text/javascript" src="../lib/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        //页面加载完成后
        $(function(){
            //第一个按钮,选中添加到右边
            $("button:eq(0)").click(function(){
                $("select:eq(0) option:selected").appendTo($("select:eq(1)"));
            });
            //第二个按钮,全部添加到右边
            $("button:eq(1)").click(function(){
                $("select:eq(0) option").appendTo($("select:eq(1)"));
            });
            //第三个按钮,选中删除到左边
            $("button:eq(2)").click(function(){
                $("select:eq(1) option:selected").appendTo($("select:eq(0)"))
            });
            //第四个按钮,全部删除到左边
            $("button:eq(3)").click(function(){
                $("select:eq(1) option").appendTo($("select:eq(0)"))
            });
        });
    </script>
    </head>
    <body>
        <div id=left>
            <select multiple="multiple" name="sel01">
                <option value="opt01">选项1</option>
                <option value="opt02">选项2</option>
                <option value="opt03">选项3</option>
                <option value="opt04">选项4</option>
                <option value="opt05">选项5</option>
                <option value="opt06">选项6</option>
                <option value="opt07">选项7</option>
            </select>

            <button>选中添加到右边</button>
            <button>全部添加到右边</button>

        </div>
        <div id="right">
            <select multiple="multiple" name="sel02">
                
            </select>
            <button>选中删除到左边</button>
            <button>全部删除到左边</button>
        </div>
    </body>
</html>

动态添加和删除记录

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <style>
        #employeeTable {
            border-spacing: 1px;
            background-color: black;
            margin: 100px auto auto auto;
        }

        th,td {
            background-color: white;
        }
        #formDiv{
            width: 250px;
            border-style:solid;
            border-width:1px;
            margin:50px auto auto auto;
            padding:10px;
        }

        #one{
            text-align: center;
        }
    </style>
    <!--引入jQuery库-->
    <script type="text/javascript" src="../lib/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function(){
            //创建一个用于复用的删除函数
            var deleteFun=function(){
                  /**在事件响应的function函数中,有一个this对象,
                 * 这个this对象是当前正在响应事件的dom对象
                 */ 
                var $trObj=$(this).parent().parent();

                /**
                 * confirm是javascript语言提供的一个确认提示框函数。
                 * 当用户点击了确定,就返回true,当用户点击了取消,就返回false
                 */ 
                var name=$trObj.find("td:first").text();
                if(confirm("你确定要删除["+ name +"]吗?")){
                    $trObj.remove();
                }
                //return false可以阻止元素的默认行为,a标签的默认行为就是跳转
                return false;
            };

            //给submit按钮绑定单击事件
            $("#addEmpButton").click(function(){
                //获取输入框、姓名、邮箱、工资的内容
                var name=$("#empName").val();
                var email=$("#email").val();
                var salary=$("#salary").val();

                //创建一个行标签对象,添加到显示数据的表格中 
                var $trObj=$(  "<tr>"+
                        "<td>"+ name +"</td>"+
                        "<td>"+ email +"</td>"+
                        "<td>"+ salary +"</td>"+
                        "<td><a href=\"deleteEmp?id=002\">Delete</a></td>"+
                        "</tr>"
                    );
                //添加到显示数据的表格中
                $trObj.appendTo($("#employeeTable"));
                //给新添加的a标签绑定单击事件
                $trObj.find("a").click(deleteFun);
            });

            //给删除的a标签绑定单击事件
            $("a").click(deleteFun);
        });
    </script>
    </head>
    <body>
        <table id="employeeTable">
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Salary</th>
                <th> </th>
            </tr>
            <tr>
                <td>Tom</td>
                <td>tom@tom.com</td>
                <td>5000</td>
                <td><a href="deleteEmp?id=001">Delete</a></td>
            </tr>
            <tr>
                <td>Jerry</td>
                <td>jerry@jerry.com</td>
                <td>8000</td>
                <td><a href="deleteEmp?id=002">Delete</a></td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>bob@bob.com</td>
                <td>10000</td>
                <td><a href="deleteEmp?id=003">Delete</a></td>
            </tr>
        </table>
        <div id="formDiv">
            <h4>添加新员工</h4>
            <table>
                <tr>
                    <td class="word">name: </td>
                    <td class="inp">
                        <input type="text" name="empName" id="empName">
                    </td>
                </tr>
                <tr>
                    <td class="word">email: </td>
                    <td class="inp">
                        <input type="text" name="email" id="email">
                    </td>
                </tr>
                <tr>
                    <td class="word">salary: </td>
                    <td class="inp">
                        <input type="text" name="salary" id="salary">
                    </td>
                </tr>
                <tr>
                    <td colspan="2" id="one">
                        <button id="addEmpButton" value="abc">
                            Submit
                        </button>
                    </td>
                </tr>
            </table>

        </div>
    </body>
</html>

上一篇:ajax跨域请求jsonp


下一篇:eq方法