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

时间：2022-03-12 17:05

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>