JQuery提交作业信息_responsedata.result.foreach(function (acc, index) -CSDN博客

本文链接：https://blog.csdn.net/qq_39845198/article/details/114463983

1、实现信息提交到另外一张表
2、实现全选全不选反选统一复选功能
注：所有复选框选中，统一控制复选框也选中，其中一个未选中，统一复选框也未选中
3、实现点击发布，发布信息表中数据清空
4、通过行中删除按钮删除一行和通过批量删除删除选中的行
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发布信息</title>
    //css文件样式，可不导入
    <link rel="stylesheet" href="index_work.css">
    <script type="text/javascript" src="../jquery-1.7.2.js"></script>
    <script type="text/javascript">

       //发布
        $(function () {
            $("#fabu").click(function () {
                //获取用户输入的内容
                var title = $("#title").val();
                var author = $("#author").val();
                var content = $("#content").val();
                //将信息添加到下一个表格中，先拼接为一行tr,再外接到下一个表格
                var tr = "<tr>"
                tr += "<td><input type='checkbox' class='ck'></td>  " +
                    "<td>" + title + "</td>" +
                    "<td>" + author + "</td>" +
                    "<td>" + content + "</td>" +
                    "<td>" + new Date().toLocaleString() + " </td>" +
                    "<td><input type='button' value='删除' class='deleteBtn'></td>" +
                    "<tr>";
                //获取提交信息表格中第二行,再外部追加
                $("#Tableshow tr:eq(1)").after(tr);
                //发布完之后，文本框的内容清空,通过为value赋空值
                $(":text").val("");
            })
            //复选框同一控制每个提交信息的复选框
            $("#selectedAll").click(function () {
                $(".ck").prop("checked", $("#selectedAll").prop("checked"));
            })
            /*注意：此方法不能绑定事件，因为只对页面中加载的class等于ck的复选框进行绑定事件
            某些方法动态添加的元素绑定事件，使用on方法
            $(".ck").click(function () {
                if ($(".ck").length == $(".ck:checked").length) {
                    $("#selectedAll").prop("checked", true);
                }else{
                    $("#selectedAll").prop("checked", false);
                }
            })*/

            //当提交信息复选框都选中，统一的复选框也选中
            $("#tableshow").on("click", ".ck", function () {
                if ($(".ck").length == $(".ck:checked").length) {
                    $("#selectedAll").prop("checked", true);
                } else {
                    $("#selectedAll").prop("checked", false);
                }
            });
            //全选
            $("#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);
                    }
                })
            })
            //删除操作,因为也是动态操作，用on方法
            $("#Tableshow").on("click",".deleteBtn",function () {
                if(confirm("是否确认删除")){
                    //$(this)代表此时触发的元素
                    $(this).parent().parent().remove();
                }
            })
            //批量删除操作
          $("#plsc").click(function () {
              if(confirm("是否确认删除")){
                  $(".ck:checked").parent().parent().remove();
              }
          })
        })

   </script>
</head>
<body>
<table id="" border="3">
    <tr>
        <td>发布信息</td>
    </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="fabu"></td>
    </tr>
</table>
<table id="Tableshow">
    <th colspan="6">提交信息</th>
    <tr>
        <th><input type="checkbox" id="selectedAll"></th>
        <th>标题</th>
        <th>作者</th>
        <th>内容</th>
        <th>发布时间</th>
        <th>操作</th>
        <br>
    </tr>
    <tr>
        <th 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="plsc"></th>
    </tr>
</table>
</body>
</html>