码迷,mamicode.com
首页 > 移动开发 > 详细

表单的编辑添加和删除 .removeClass() .append() .preAll() .attr('b') document.createElement()

时间:2018-07-14 16:45:03      阅读:291      评论:0      收藏:0      [点我收藏+]

标签:display   cti   .sh   put   doctype   remove   opacity   1.3   query   

1.$(..).removeClass()   去除属性

2$(..).append 把内容加在后面 

3.$(..).preAll()  前面所有的兄弟属性

4.$(..).attr(‘b‘)  属性b对应的数值 

5.document.createElement() 创建标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .model{
            position: fixed;
            height: 500px;
            width: 500px;
            top: 50%;
            left: 50%;
            margin-top: -200px;
            margin-left: -200px;
            z-index: 10;
            background-color: white;
        }
        .shadow{
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            z-index: 9;
            opacity: 0.6;
            background-color: black;
        }
        .hide{
            display: none;
        }




    </style>
</head>
<body>
    <div onclick="add3Element()">添加</div>
    <table border="1px" class="tb">
         <tr>
             <td b="post">1.1.1.1</td>
             <td b="host">80</td>
             <td>
                 <span class="edit">编辑</span><span class="delete">删除</span>
             </td>
         </tr>
         <tr>
             <td b="post">1.1.1.2</td>
             <td b="host">80</td>
             <td>
                 <span class="edit">编辑</span><span class="delete">删除</span>
             </td>
         </tr>
         <tr>
             <td b="post">1.1.1.3</td>
             <td b="host">80</td>
             <td>
                 <span class="edit">编辑</span><span class="delete">删除</span>
             </td>
         </tr>
         <tr>
             <td b="post">1.1.1.4</td>
             <td b="host">80</td>
             <td>
                 <span class="edit">编辑</span><span class="delete">删除</span>
             </td>
         </tr>
    </table>
    <div class="model hide">
        <div><input type="text" a="post"></div>
        <div><input type="text" a="host"></div>
        <div><input type="button" value="取消" onclick="onDelete()"></div>
        <div><input type="button" value="确定" onclick="onSure()"></div>
    </div>
    <div class="shadow hide"></div>
<script src="../jquery-2.12.4.js"></script>
<script>
    $(.edit).click(function () {
        $(.model, .shadow).removeClass(hide);
        var v = $(this).parent().prevAll();
            v.each(function(){
                tag = $(this).attr(b);  //获取属性b的值
                console.log(tag);
                ft = $(this).text();
                tag1 = .model input[a= + tag +];
                $(tag1).val(ft)


            })

    });
    $(.delete).click(function () {
        $(this).parent().parent().remove()

    });
    function onDelete(){
            $(.model, .shadow).addClass(hide);
            $(.model input[type="text"]).val(‘‘)
    }

    function  add3Element() {
        $(.model, .shadow).removeClass(hide);

    }
    function onSure(){
        t1 = 1.1.1.1;
        t2 = 80;
        var tr = document.createElement(tr);
        td1 = document.createElement(td);
        td1.innerHTML=t1;
        td2 = document.createElement(td);
        td2.innerHTML=t2;
        $(tr).append(td1);
        $(tr).append(td2);
        console.log(tr);
        $(.tb).append(tr)



    }



</script>
</body>
</html>

 


 

表单的编辑添加和删除 .removeClass() .append() .preAll() .attr('b') document.createElement()

标签:display   cti   .sh   put   doctype   remove   opacity   1.3   query   

原文地址:https://www.cnblogs.com/my-love-is-python/p/9309549.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!