jQuery之动态为表格添加数据

最新推荐文章于 2024-03-09 21:49:48 发布

风筝风筝等等我

最新推荐文章于 2024-03-09 21:49:48 发布

阅读量2.3w

点赞数 11

本文链接：https://blog.csdn.net/a1k2l45k/article/details/80370506

版权

项目需求

需要一个页面，包括一张表格，一个button(id=”button1”)
button1点击事件是会在页面上方出现用来为表格添加显示框，背景为灰色
显示框中也有一个button(id=”button2),其点击事件是将显示框中的数据添加到页面的表格中
显示框中需要包括一个div,其点击事件是关闭显示框

步骤

1. HTML结构

  利用HTML创建一个四行三列表格，并为之填充数据
  在table上方添加一个button
  创建一个对话框，包括两个input，一个button

2. CSS美化

 为table、th、td添加外边框，并将重叠线条变为一条
 第一行背景为淡蓝色

第一步和第二步截图如下:
这里写图片描述

这里写图片描述

3. jQuery操作

 具体需求，参照上图
 1.  在第一个截图页面中点击addData按钮，会出现第二个截图页面


    ```
    $(".button1").click(function(){
                        $(".bgc").show();
                        $(".newData").show();
                    });
    ```
 2.  截图一中点击GET则其所在行删除


    ```
   $("a").click(function(){
            $(this).parent("td").parent("tr").remove();
        });
    ```
 3.  截图二中点击右上角小×则截图二消失


    ```
   $("#span2").click(function(){
            $(".newData").hide();
            $(".bgc").hide();

        });
    ```
 4.  截图二中点击“提交”按钮，则将“课程名称”和“所属院校”的值添加到截图一中表         格的下方


    ```
   var td1=$(".center #input1").val();
    var td2=$(".center #input2").val();
    var tr=$("<tr></tr>");             
    tr.html("<td>"+td1+"</td><td>"+td2+"</td>"+"<td><a href='javascript:void(0)'>GET</a></td>");
    $("tbody").append(tr);
    tr.find("a").click(function(){
        $(this).parent("td").parent("tr").remove();
    });
    ```
 5.  截图二中点击事件发生后判断“课程名称”的值是否为空，是则弹出警告框，停止函数执行，不是则进行点击事件


    ```
    if($(".center #input1").val()==="")
    {
            alert("输入值不能为空");
            return;
    }    
    ```
 6.  截图二中将数据提交之后，将“课程名称”的值设置为空，且截图二消失


    ```
    $(".center #input1").val("");                  
    $(".newData").hide();
    $(".bgc").hide();   

    ```

完整代码如下

```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .wrap{
                width: 550px;
                margin: 100px auto;
            }
            button{
                width: 90px;
                height: 30px;
            }
            table{
                width: 500px;
                border: 1px solid #ccc;
                border-collapse: collapse;
            }
            th,td{
                border: 1px solid #ccc;
                height: 35px;
                text-align: center;
            }
            th{
                background-color: dodgerblue;
            }
            .bgc{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: gray;
                opacity: 0.5;
                display:none;
            }
            .newData{
                background-color: white;
                position: absolute;
                left: 50%;
                top: 50%;
                width: 408px;
                height: 326px;
                margin-left: -204px;
                margin-top: -150px;
                display: none;

            }
            .title{
                width: 408px;
                height: 40px;
                background-color: #ccc;
            }
            .title span{
                height: 40px;
                line-height: 40px;
            }
            #span2{
                padding-right: 10px;
                float: right;
                cursor: pointer;
            }

            .bottom{
                position: absolute;
                left: 0;
                bottom: 0;
                width: 408px;
                height: 40px;
                background-color: #ccc;
                text-align: center;         
            }
            .bottom button{
                margin-top: 5px;
            }
            .center{
                height: 246px;
                width: 408px;
                text-align: center;
                padding-top: 60px;
            }   
            .center input{
                width: 200px;
                height: 30px;
            }
        </style>

        <script src="jquery-1.11.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $(".button1").click(function(){
                    $(".bgc").show();
                    $(".newData").show();
                });


                $("#span2").click(function(){
                    $(".newData").hide();
                    $(".bgc").hide();

                });


                $("a").click(function(){
                    $(this).parent("td").parent("tr").remove();
                });


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

                    if($(".center #input1").val()==="")
                    {
                        alert("输入值不能为空");
                        return;
                    }
                    var td1=$(".center #input1").val();
                    var td2=$(".center #input2").val();
                    var tr=$("<tr></tr>");             
                    tr.html("<td>"+td1+"</td><td>"+td2+"</td>"+"<td><a href='javascript:void(0)'>GET</a></td>");
                    $("tbody").append(tr);
                    tr.find("a").click(function(){
                        $(this).parent("td").parent("tr").remove();
                    });


                    $(".center #input1").val("");

                    $(".newData").hide();
                    $(".bgc").hide();
                });
            });
        </script>
    </head>
    <body>
        <div class="wrap">
            <button class="button1">addData</button>
            <table>
                <thead>
                    <tr>
                        <th>课程名称</th>
                        <th>所属院校</th>
                        <th>已学习</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>JavaScript</td>
                        <td>前端与移动开发</td>
                        <td><a href="javascript:void(0)">GET</a></td>
                    </tr>
                    <tr>
                        <td>CSS</td>
                        <td>前端与移动开发</td>
                        <td><a href="javascript:void(0)">GET</a></td>
                    </tr>
                    <tr>
                        <td>HTML</td>
                        <td>前端与移动开发</td>
                        <td><a href="javascript:void(0)">GET</a></td>
                    </tr>
                </tbody>
            </table>

        </div>


        <div class="bgc">           
        </div>

        <div class="newData">
            <div class="title">
                <span id="span1">添加标题</span>
                <span id="span2">x</span>
            </div>

            <div class="center">
                课程名称:&nbsp;<input type="text" name="" id="input1" value="" placeholder="请输入课程名称"/>
                <br /><br /><br />
                所属院校:&nbsp;<input type="text" name="" id="input2" value="未来学院" />
            </div>

            <div class="bottom">
                <button id="button2">提交</button>
            </div>
        </div>          
    </body>
</html>

```

风筝风筝等等我

关注

11
点赞
踩
54

收藏

觉得还不错? 一键收藏
2
评论
jQuery之动态为表格添加数据

项目需求需要一个页面，包括一张表格，一个button(id=”button1”)button1点击事件是会在页面上方出现用来为表格添加显示框，背景为灰色显示框中也有一个button(id=”button2),其点击事件是将显示框中的数据添加到页面的表格中显示框中需要包括一个div,其点击事件是关闭显示框步骤HTML结构和CSS美化...
复制链接

扫一扫