zoukankan html css js c++ java

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

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>

查看全文

相关阅读:
前端基础进阶（十一）：详细图解jQuery对象，以及如何扩展jQuery插件
 前端基础进阶（十）：面向对象实战之封装拖拽对象
 前端基础进阶（九）：详解面向对象、构造函数、原型与原型链
 前端基础进阶（八）：深入详解函数的柯里化
 前端基础进阶（七）：函数与函数式编程
 前端基础进阶（六）：在chrome开发者工具中观察函数调用栈、作用域链与闭包
 前端基础进阶（五）：全方位解读this
lvs健康检查脚本第三版
 rsync同步常用命令
 nginx启动脚本

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