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

Posted python我的最爱

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了表单的编辑添加和删除 .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>

 


 

以上是关于表单的编辑添加和删除 .removeClass() .append() .preAll() .attr('b') document.createElement()的主要内容,如果未能解决你的问题,请参考以下文章

Sharepoint 2010添加,编辑,删除表单替换为自定义可视Web部件

删除以下 jQuery 点击功能

Django:使用TemplateView在Django表单中添加编辑和删除功能的问题

PHP 模式添加、编辑、查看和删除数据库条目

在外部单击时 removeClass('active')

后台传回的Json数据怎么在HTML表单中显示并能动态编辑(添加、删除)