89-90

时间  2020-02-02
原文   原文链接

文档处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <input id="t1" type="text">
    <input id="a1" type="button" value="添加">
    <ul id="u1">
        <li>1</li>
        <li>2</li>
    </ul>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#a1').click(function () {
            var v = $('#t1').val();     //获取input中输入的值
            var temp = "<li>" + v + "</li>";    //拼接li标签和输入的值
            $('#u1').append(temp);      //将temp追加到li标签的最下面
        })
    </script>

</body>
</html>

enter description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <input id="t1" type="text">
    <input id="a1" type="button" value="添加">
    <ul id="u1">
        <li>1</li>
        <li>2</li>
    </ul>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#a1').click(function () {
            var v = $('#t1').val();
            var temp = "<li>" + v + "</li>";
            $('#u1').prepend(temp);   //prepend向最前面追加
        })
    </script>

</body>
</html>

enter description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input id="t1" type="text">
<input id="a1" type="button" value="添加">
<ul id="u1">
    <li>1</li>
    <li>2</li>
</ul>

<script src="jquery-1.12.4.js"></script>
<script>
    $('#a1').click(function () {
        var v = $('#t1').val();
        var temp = "<li>" + v + "</li>";
        $('#u1').after(temp);   //after是追加到ul标签下面，与ul同级
    })
</script>

</body>
</html>

代码说明：html

after追加到同级的后面；
before追加到同级的上面

enter description here

enter description here

  • remove
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input id="t1" type="text">
<input id="a1" type="button" value="添加">
<input id="a2" type="button" value="删除">
<ul id="u1">
    <li>1</li>
    <li>2</li>
</ul>

<script src="jquery-1.12.4.js"></script>
<script>
    $('#a1').click(function () {
        var v = $('#t1').val();
        var temp = "<li>" + v + "</li>";
        $('#u1').prepend(temp);
    });

    $('#a2').click(function () {
        var index = $('#t1').val();
        $('#ul li').eq(index).remove();
    })

</script>

</body>
</html>

enter description here

enter description here

上2图：咱们删除索引为2的li标签（从下向上）。jquery

  • empty
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input id="t1" type="text">
<input id="a1" type="button" value="添加">
<input id="a2" type="button" value="删除">
<ul id="u1">
    <li>1</li>
    <li>2</li>
</ul>

<script src="jquery-1.12.4.js"></script>
<script>
    $('#a1').click(function () {
        var v = $('#t1').val();
        var temp = "<li>" + v + "</li>";
        $('#u1').prepend(temp);
    });

    $('#a2').click(function () {
        var index = $('#t1').val();
        $('#u1 li').eq(index).empty();
    })

</script>

</body>
</html>

enter description here

上图：empty清空数据，是从上向下获取索引的app

  • clone
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input id="t1" type="text">
<input id="a1" type="button" value="添加">
<input id="a2" type="button" value="删除">
<input id="a3" type="button" value="复制">
<ul id="u1">
    <li>1</li>
    <li>2</li>
</ul>

<script src="jquery-1.12.4.js"></script>
<script>
    $('#a1').click(function () {
        var v = $('#t1').val();
        var temp = "<li>" + v + "</li>";
        $('#u1').prepend(temp);
    });

    $('#a2').click(function () {
        var index = $('#t1').val();
        $('#u1 li').eq(index).empty();
    });

    $('#a3').click(function () {
        var index = $('#t1').val();
        var v = $('#u1 li').eq(index).clone();  //克隆一份数据
        $('#u1').append(v);     //将克隆的数据添加到最后
    })

</script>

</body>
</html>

enter description here

上图：成功将索引为0的数据（123）复制并添加到最后。dom

模态编辑框

  • 删除
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        .hide{
            display: none;
        }

        .model{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            margin-left: -250px;
            margin-top: -250px;
            background-color: #eeeeee;
            z-index: 10;
        }

        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;
            z-index: 9;
        }

    </style>

</head>
<body>

<a onclick="addElement();">添加</a>
<table border="1">
    <tr>
        <td target="hostname">1.1.1.11</td>
        <td target="port">80</td>
        <td>
            <a class="edit">编辑</a> | <a class="del">删除</a>  <!--定义del-->
        </td>
    </tr>
    <tr>
        <td target="hostname">1.1.1.12</td>
        <td target="port">80</td>
        <td>
            <a class="edit">编辑</a> | <a class="del">删除</a>
        </td>
    </tr>
    <tr>
        <td target="hostname">1.1.1.13</td>
        <td target="port">80</td>
        <td>
            <a class="edit">编辑</a> | <a class="del">删除</a>
        </td>
    </tr>
    <tr>
        <td target="hostname">1.1.1.14</td>
        <td target="port">80</td>
        <td>
            <a class="edit">编辑</a> | <a class="del">删除</a>
        </td>
    </tr>
</table>

<div class="model hide">
    <div>
        <input name="hostname" type="text">
        <input name="port" type="text">

    </div>
    <div>
        <input type="button" value="取消" onclick="cancleModel();">
    </div>
</div>

<div class="shadow hide"></div>

<script src="jquery-1.12.4.js"></script>

<script>

    $('.del').click(function () {
        $(this).parent().parent().remove();
    });     // 点击del标签后，获取tr标签，并将其remove掉

    function addElement() {
        $(".model,.shadow").removeClass("hide");
    }
    function cancleModel() {
        $(".model,.shadow").addClass("hide");
        $('.model input[type="text"]').val("");
    }

    $('.edit').click(function () {
        $(".model,.shadow").removeClass("hide");

        var tds = $(this).parent().prevAll();
        tds.each(function () {
            var n = $(this).attr('target');
            var text = $(this).text();

            var a1 = '.model input[name="';
            var a2 = '"]';
            var temp = a1 + n + a2;
            $(temp).val(text);
        })
    })

</script>

</body>
</html>

enter description here

enter description here

上2图：删除了七中两条内容ide

  • 添加确认
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        .hide{
            display: none;
        }

        .model{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            margin-left: -250px;
            margin-top: -250px;
            background-color: #eeeeee;
            z-index: 10;
        }

        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;
            z-index: 9;
        }

    </style>

</head>
<body>

<a onclick="addElement();">添加</a>
<table border="1" id="tb">                      //定义id="tb"
    <tr>
        <td target="hostname">1.1.1.11</td>
        <td target="port">80</td>

        <td>
            <a class="edit">编辑</a> | <a class="del">删除</a>
        </td>
    </tr>
    <tr>
        <td target="hostname">1.1.1.12</td>
        <td target="port">80</td>

        <td>
            <a class="edit">编辑</a> | <a class="del">删除</a>
        </td>
    </tr>
    <tr>
        <td target="hostname">1.1.1.13</td>
        <td target="port">80</td>

        <td>
            <a class="edit">编辑</a> | <a class="del">删除</a>
        </td>
    </tr>
    <tr>
        <td target="hostname">1.1.1.14</td>
        <td target="port">80</td>

        <td>
            <a class="edit">编辑</a> | <a class="del">删除</a>
        </td>
    </tr>
</table>

<div class="model hide">
    <div>
        <input name="hostname" type="text">
        <input name="port" type="text">

    </div>

    <div>
        <input type="button" value="取消" onclick="cancleModel();">
        <input type="button" value="肯定" onclick="confirmModel();">        //添加确认按钮
    </div>

</div>

<div class="shadow hide"></div>

<script src="jquery-1.12.4.js"></script>

<script>

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

    function confirmModel() {

        var tr = document.createElement('tr');  //经过dom建立tr标签

        var td1 = document.createElement('td'); //经过dom建立td标签
        td1.innerHTML = "11.11.11.11";      //设置td1内容

        var td2 = document.createElement('td');
        td2.innerHTML = "8001";

        $(tr).append(td1);      //将创建好的td1标签和内容添加到tr标签中
        $(tr).append(td2);

        $('#tb').append(tr);    //将tr添加到tb表格中

        $(".model, .shadow").addClass('hide');   //点击肯定后隐藏弹窗

    }

    function addElement() {
        $(".model,.shadow").removeClass("hide");
    }
    function cancleModel() {
        $(".model,.shadow").addClass("hide");
        $('.model input[type="text"]').val("");
    }

    $('.edit').click(function () {
        $(".model,.shadow").removeClass("hide");

        var tds = $(this).parent().prevAll();
        tds.each(function () {
            var n = $(this).attr('target');
            var text = $(this).text();

            var a1 = '.model input[name="';
            var a2 = '"]';
            var temp = a1 + n + a2;
            $(temp).val(text);
        })
    })

</script>

</body>
</html>

enter description here

上图：由于咱们在代码中设定了内容，因此直接点肯定就会添加11.11.11.11和8001到表格中。this

每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程