您的位置：首页 > Web前端 > JQuery

jQuery simpleDemo

2017-01-13 08:38 232 查看

HTML

[html] view
plain copy

print ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>员工管理---</title>

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>

<script type="text/javascript" src="em.js"></script>

</head>

<body>

<center>

    <br> <br> 添加新员工 <br> <br>

    name: <input type="text" name="name" id="name" />

    email: <input type="text" name="email" id="email" />

    salary: <input type="text" name="salary" id="salary" /> <br> <br>

    <button id="addEmpButton">Submit</button>

    <br> <br>

    <hr>

    <br> <br>

    <table  border="1" cellpadding="5" cellspacing=0>

        <tbody 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=1">Delete</a></td>

            </tr>

            <tr>

                <td>Jerry</td>

                <td>jerry@sohu.com</td>

                <td>8000</td>

                <td><a href="deleteEmp?id=2">Delete</a></td>

            </tr>

            <tr>

                <td>Bob</td>

                <td>bob@tom.com</td>

                <td>10000</td>

                <td><a href="deleteEmp?id=3">Delete</a></td>

            </tr>

        </tbody>



    </table>

</center>

</body>

</html>

em.js

[javascript] view
plain copy

print ?

$(function(){

    //<button id="addEmpButton">Submit</button>

    $("#addEmpButton").click(function(){

        var name = $("#name").val();

        var email = $("#email").val();

        var salary = $("#salary").val();



        /*

            <tr>

                <td>name</td>

                <td>email</td>

                <td>salary</td>

                <td><a href="deleteEmp?id=3">Delete</a></td>

            </tr>

         */

        var id = $("tr").size();

        alert(id);

        //方法链调用

        var $tr = $("<tr>").append("<td>"+name+"</td>")

                    .append("<td>"+email+"</td>")

                    .append("<td>"+salary+"</td>")

                    .append('<td><a href="deleteEmp?id='+id+'">Delete</a></td>');

        $tr.find("a").click(deleteEmp);



        $("tbody").append($tr);

    });



    var deleteEmp = function(){

        alert("-----");

        //this: 代表发生事件的标签

        $(this).parent().parent().remove();



        return false;//让链接失效

    };



    //给所有<a>添加点击事件

    $("a").click(deleteEmp);



});

html

[html] view
plain copy

print ?

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>选择爱好</title>

<script type="text/javascript" src="../js/jquery-1.7.2.js"></script>

<script type="text/javascript" src="checkbox.js"></script>

    </head>

<body>

    <form method="post" action="">

        <h3>你爱好的运动是？</h3>

        <input type="checkbox" id="checkedAll_2"/>全选/全不选

        <br/>

        <input type="checkbox" name="items" value="足球"/>足球

        <input type="checkbox" name="items" value="篮球"/>篮球

        <input type="checkbox" name="items" value="羽毛球"/>羽毛球

        <input type="checkbox" name="items" value="乒乓球"/>乒乓球

        <br/>

        <input type="button" id="CheckedAll" value="全　选"/>

        <input type="button" id="CheckedNo" value="全不选"/>

        <input type="button" id="CheckedRev" value="反　选"/>



        <input type="button" id="send" value="提　交"/>

    </form>

</body>

</html>

checkbox.js

[javascript] view
plain copy

print ?

$(function(){

    //给"全选"添加点击事件

    $("#CheckedAll").click(function(){

        //alert("=========");

        //checked=true

        $(":checkbox[name=items]").attr("checked", true);



        $("#checkedAll_2").attr("checked", true);

    });



    //给"全不选"添加点击事件

    $("#CheckedNo").click(function(){

        //alert("=========");

        //checked=true

        $(":checkbox[name=items]").attr("checked", false);

        $("#checkedAll_2").attr("checked", false);

    });



    //给"反选"添加点击事件

    $("#CheckedRev").click(function(){

        //var check = this.checked;//得到当前选中的状态

        //遍历

        $(":checkbox[name=items]").each(function(){

            var check = this.checked;//得到当前选中的状态

            //alert(check);

            $(this).attr("checked", !check);

        });



        //如果没有被选中的选项个数为0,就是选中

        $("#checkedAll_2").attr("checked",$(":checkbox[name=items]:not(:checked)").size()==0 );

    });



    //给"全选/全不选"添加点击事件

    $("#checkedAll_2").click(function(){

        var check = this.checked; //当前点击的"全选/全不选"的状态

        $(":checkbox[name=items]").attr("checked", check);

    });

});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery simpleDemo

相关文章推荐

新的分享

章节导航