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教程