表格的增刪改查-委託(二)------增長詳細信息預覽框

時間 2019-11-18

標籤表格增刪委託增長詳細信息預覽简体版

原文原文鏈接

改動的地方

改動增長的功能

html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DOM操做</title>
</head>
<style>
    #detail {
        width: 200px;
        height: 200px;
        border: 1px solid black;
        display: none;
        position: absolute;
        left: 500px;
        top: 300px;
        background: #fff;
    }
</style>

<body>
    標題：<input type="text" id="topic_name" size=60 /><br>
    內容：<input type="text" id="topic_content" size=60 /><br>
    做者：<input type="text" id="author" size=60 /><br>
    <button id="saveBtn">保存</button>
    <table id="tab" border=1>
        <tr>
            <th>ID</th>
            <th>帖子名稱</th>
            <th>內容預覽</th>
            <th>發佈時間</th>
            <th>做者</th>
            <th>操做</th>
        </tr>
        <tr style="display: none;">
            <td>25</td>
            <td class="title">ABC</td>
            <td>xxxxxxxx....</td>
            <td>2016-04-15</td>
            <td>LCE</td>
            <td name="option"><a name="detail" href="#">詳細信息</a> <a class="delbtn" href="javascript:;">刪除</a></td>
        </tr>
        <tr>
            <td>25</td>
            <td class="title">ABC</td>
            <td>xxxxxxxx....</td>
            <td>2016-04-15</td>
            <td>LCE</td>
            <td name="option"><a name="detail" href="#">詳細信息</a> <a class="delbtn" href="javascript:;">刪除</a></td>
        </tr>
        <tr>
            <td>25</td>
            <td class="title">ABC</td>
            <td>xxxxxxxx....</td>
            <td>2016-04-15</td>
            <td>LCE</td>
            <td name="option"><a name="detail" href="#">詳細信息</a> <a class="delbtn" href="javascript:;">刪除</a></td>
        </tr>
        <tr>
            <td>25</td>
            <td class="title">ABC</td>
            <td>xxxxxxxx....</td>
            <td>2016-04-15</td>
            <td>LCE</td>
            <td name="option"><a name="detail" href="#">詳細信息</a> <a class="delbtn" href="javascript:;">刪除</a></td>
        </tr>
        <tr>
            <td>25</td>
            <td class="title">ABC</td>
            <td>xxxxxxxx....</td>
            <td>2016-04-15</td>
            <td>LCE</td>
            <td name="option"><a name="detail" href="#">詳細信息</a> <a class="delbtn" href="javascript:;">刪除</a></td>
        </tr>
        <tr>
            <td>25</td>
            <td class="title">ABC</td>
            <td>xxxxxxxx....</td>
            <td>2016-04-15</td>
            <td>LCE</td>
            <td name="option"><a name="detail" href="#">詳細信息</a> <a class="delbtn" href="javascript:;">刪除</a></td>
        </tr>
        <tr>
            <td>25</td>
            <td class="title">ABC</td>
            <td>xxxxxxxx....</td>
            <td>2016-04-15</td>
            <td>LCE</td>
            <td name="option"><a name="detail" href="#">詳細信息</a> <a class="delbtn" href="javascript:;">刪除</a></td>
        </tr>
        <table>
            <div id="detail"></div>
</body>

</html>
<script src="../common.js"></script>
<script>
    let $topicName = $('#topic_name');
    let $topicContent = $('#topic_content');
    let $author = $('#author');
    let $saveBtn = $('#saveBtn');
    let $tab = $('#tab');
    let $div = $('#detail');
    $saveBtn.onclick = function () {
        let $tr = $tab.children[0].children[1].cloneNode(true);
        console.log($tr);
        $tab.children[0].appendChild($tr);
        $tr.style.display= "table-row";//不能寫block,不然$tr全在第一列g

        $tr.children[1].innerHTML = $topicName.value;
        $tr.children[2].innerHTML = $topicContent.value;
        $tr.children[4].innerHTML = $author.value;      
    }
    $tab.onclick = function(e){
        const target = e.target || e.srcElement;
        console.log(target.name,target.className)
        // target.nodeName == "TD" && target.getAttribute("name") != "option"更好一點
        if(target.nodeName == "TD" && target.children[0].getAttribute("name") != "detail" && target.children[1].getAttribute("className") != "delbtn"){
            let $input = document.createElement('input');           
            $input.value = target.innerHTML;
            target.innerHTML = "";
            target.appendChild($input);
            $input.focus();
            $input.onblur = function(){
                target.innerHTML = $input.value;
            };
        }
        if(target.nodeName == "A" && target.name == "detail"){
            $div.style.display = "block";
            $div.innerHTML = target.parentNode.parentNode.children[2].innerHTML;
            $div.style.left = e.pageX + 20+ 'px';
            $div.style.top = e.pageY + 20 +'px';
            target.onblur = function(){
                $div.style.display = "none";
            };          
        }
        if(target.nodeName == "A" && target.className == "delbtn"){
            target.parentNode.parentNode.remove();
        }
    }
</script>

common.js

//  判斷數組是否還有這個元素
function include(arr, item) {
    for(var i = 0; i < arr.length; i++) {
       if(arr[i] === item) {
           return true;
       } 
    }
    return false;
}
// 返回元素所在的位置
function indexOf(arr, item) {
    for(var i = 0; i < arr.length; i++) {
        if(arr[i] === item) {
            return i;
        } 
     }
     return -1;
}

// 任意區間隨機整數
function getRandom(max, min) {
    min = min || 0;
    if(min > max) {
        var a = min;
        min = max;
        max = a;
    }
    return min + Math.floor(Math.random() * (max - min + 1));
}

// 數組去重
function noRepeat(arr) {
    var __arr = [];
    for(var i = 0; i < arr.length; i++) {
        // 存在返回true, 不存在返回false
        var bool = __arr.indexOf(arr[i])
        if(bool == -1) {
            __arr.push(arr[i]);
        }
    }
    return __arr;
}

function $(ele) {
    return document.querySelector(ele);
}
function $A(ele) {
    return document.querySelectorAll(ele);
}

function getRandomColor() {
    var str = '0123456789abcdef';
    var color = '#';
    for(var i = 0; i < 6; i++) {
        color += str[getRandom(str.length - 1)];
    }
    return color;
}

// 格式化url, 獲取參數
function parseUrl(url) {
    var obj = {};
    url = url.split('?')[1].split('#')[0];
    url = url.split('&');
    url.forEach(function (x) {
        var arr = x.split('=');
        obj[arr[0]] = arr[1];
    })
    return obj;
}

// 獲取非行內樣式
function getStyle(ele, attr) {
    if(window.getComputedStyle) {
        return window.getComputedStyle(ele, null)[attr]
    }
    return ele.currentStyle[attr];
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。