JavaWeb《微博发布》案例分析

最新推荐文章于 2024-06-15 04:00:00 发布

Zoran106

最新推荐文章于 2024-06-15 04:00:00 发布

阅读量333

点赞数

分类专栏： JavaWeb 文章标签： javaweb

本文链接：https://blog.csdn.net/zi_zhuo/article/details/114503287

版权

JavaWeb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaWeb《微博发布》案例分析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--引入了外部css和js文件-->
    <link rel="stylesheet" href="css/index_work.css">
    <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>

    <script type="text/javascript">
        $(function () {
            $("#fbBtn").click(function () {
                
                //获取上面三个单行文本框的内容，val()方法返回值为String，也就是value属性的内容
                var title = $("#title").val();
                var author = $("#author").val();
                var content = $("#content").val();

                //拼接字符串
                var tr = "<tr>";
                tr += "<td><input type='checkbox' class='ck'></td>";
                tr += "<td>"+title+"</td>";
                tr += "<td>"+author+"</td>";
                tr += "<td>"+content+"</td>";
                tr += "<td>"+new Date().toLocaleString()+"</td>";
                tr += "<td><input type='button' value='删除' class='deleteBtn'></td>";
                tr += "</tr>";

                //在下面的表单中，第二行后面进行外部追加
                $("#showWebo tr:eq(1)").after(tr);
                //清空上面表单中，所有text单行文本框的值
                $("#fbTable :text").val("");
            });

            //全选按钮
            $("#qx").click(function () {
                $(".ck").prop("checked", true);
            });

            //全不选按钮
            $("#qbx").click(function () {
                $(".ck").prop("checked", false);
            });

            //反选按钮
            $("#fx").click(function () {
                $(".ck").map(function () {
                    /*if($(this).prop("checked")){
                        $(this).prop("checked", false);
                    }else{
                        $(this).prop("checked", true);
                    }*/
                    if(this.checked){
                        this.checked = false;
                    }else{
                        this.checked = true;
                    }
                });
            });

            //通过表头中的复选框控制所有复选框的选中或不选中
            $("#selectAll").click(function () {
                $(".ck").prop("checked", $(this).prop("checked"));
            });

            //如果所有的复选框都选中，表头的复选框也要选中
        	//.ck是添加的每条信息的复选框，是后面添加的，绑定单击事件需要用on方法
            $("#showWebo").on("click", ".ck", function () {
                //通过复选框选中的长度判断是否全部选中
                if($(".ck").length == $(".ck:checked").length){
                    $("#selectAll").prop("checked", true);
                }else{
                    $("#selectAll").prop("checked", false);
                }
            });

            //删除某个微博信息
        	//删除按钮.deleteBtn也是后面添加的，绑定单击事件需要用on方法
            $("#showWebo").on("click", ".deleteBtn", function () {
                if(confirm("确认删除吗？")){
                    /*
                    this是js对象
                    $(this)是jQuery对象
                    $(this).parent().parent()从删除按钮到td，再到此行tr
                    remove()直接删除
                    */
                    $(this).parent().parent().remove();
                }
            });

            //批量删除
            $("#deleteMore").click(function () {
                if(confirm("确认删除吗？")){
                    //同理，从被选择到的复选框，到td，再到tr，删除整行
                    $(".ck:checked").parent().parent().remove();
                }
            });

            //收起展开（了解）
            $("#testId").click(function () {
                //选择器选择从第二行开始的内容，fadeToggle()是淡入淡出的方法
                $("#showWebo tr:gt(0)").fadeToggle(1000);
            });
        });
    </script>
</head>
<body>

    <table id="fbTable">
        <tr>
            <th>微博发布</th>
        </tr>
        <tr>
            <td>
                标题:<input type="text" id="title">
            </td>
        </tr>
        <tr>
            <td>
                作者:<input type="text" id="author">
            </td>
        </tr>
        <tr>
            <td>
                内容:<input type="text" id="content">
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" value="发布" id="fbBtn">
            </td>
        </tr>
    </table>

    <table id="showWebo" style="margin-top: 20px;">
        <tr>
            <th colspan="6">微博信息（<input type="button" value="收起/展开" id="testId">）</th>
        </tr>
        <tr>
            <th>
                <input type="checkbox" id="selectAll">
            </th>
            <th>标题</th>
            <th>作者</th>
            <th>内容</th>
            <th>发布时间</th>
            <th>操作</th>
        </tr>
        <tr>
            <td colspan="6">
                <input type="button" value="全选" id="qx">
                <input type="button" value="全不选" id="qbx">
                <input type="button" value="反选" id="fx">
                <input type="button" value="批量删除" id="deleteMore">
            </td>
        </tr>
    </table>

</body>
</html>

Zoran106

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb《微博发布》案例分析

JavaWeb微博发布案例分析<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/index_work.css"> <script type="text
复制链接

扫一扫

专栏目录