快捷導(dǎo)航

JavaScript實現(xiàn)動態(tài)表格效果

更新時間：2021年06月22日 10:14:13 作者：妄癡夢中

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)動態(tài)表格效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)動態(tài)表格效果的具體代碼，供大家參考，具體內(nèi)容如下

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>動態(tài)表格</title>
    <style>
        .bigDiv{
            width: 600px;
            margin: 50px auto;
        }
        table{
            border: solid black 2px;
            width: 500px;
            /*邊框會合并為一個單一的邊框*/
            border-collapse: collapse;
        }
        th{
            background-color: darkgray;
            /*表頭字體加粗*/
            font-weight: bold;
            /*字體顏色  #ffffff：白色*/
            color: #ffffff;
        }
        th,td{
            border: 1px solid black ;
            /*指定的寬度和高度的行為。指定元素的寬度和高度（最小/最大屬性）適用于box的寬度和高度*/
            box-sizing: content-box;
            text-align: center;
            /*指定寬高*/
            width: 50px;
            height: 30px;
            font-size: 14px;
        }
        .but{
            width: 150px;
            margin: 5px 400px;
            /*讓所有彈性盒模型對象的子元素都有相同的長度，且忽略它們內(nèi)部的內(nèi)容*/
            display: flex;
            /*在彈性盒對象的 <div> 元素中的各項周圍留有空白*/
            justify-content: flex-end;
        }
    </style>
</head>
<body>
<div class="bigDiv">
<table align="center">
    <thead>
    <tr>
        <th>序號</th>
        <th>姓名</th>
        <th>年齡</th>
        <th>性別</th>
        <th>聯(lián)系電話</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>逍遙</td>
        <td>18</td>
        <td>男</td>
        <td>12354546</td>
    </tr>
    <tr>
        <td>2</td>
        <td>小白</td>
        <td>19</td>
        <td>女</td>
        <td>252323523</td>
    </tr>
    </tbody>
</table>
<div class="but">
    <button type="button" onclick="addRow()">添加一行</button>
    <button type="button" onclick="saveData()">保存數(shù)據(jù)</button>
</div>
</div>
<script>
    var id;
    var name;
    var age;
    var sex;
    var phone;
    var tdArr=new Array();
    function addRow() {
        let tbodyObj = document.getElementsByTagName("tbody")[0];
        let trObj = document.createElement("tr");
        tbodyObj.appendChild(trObj);
        //創(chuàng)建5個td
        for (let i = 0; i < 5; i++) {
            let tdObj = document.createElement("td");
            trObj.appendChild(tdObj);
            //創(chuàng)建input輸入框?qū)ο?
            let inputObj = document.createElement("input");
            //設(shè)置input對象的id屬性
            inputObj.setAttribute("id",i);
            //為每一個輸入框添加一個失去焦點事件
            inputObj.addEventListener("blur",function () {
                switch (this.id) {
                    case "0":
                        id=this.value;
                        break;
                    case "1":
                        name=this.value;
                        break;
                    case "2":
                        age=this.value;
                        break;
                    case "3":
                        sex=this.value;
                        break;
                    case "4":
                        phone=this.value;
                        break;
                }
            });

            //隱藏未點擊輸入時的input邊框
            inputObj.style.border="0";
            //隱藏點擊輸入時的邊框
            inputObj.style.outline="none";
            //設(shè)置輸入框?qū)挾?
            inputObj.style.width="80px";
            //設(shè)置輸入框高度
            inputObj.style.height="25px";
            //設(shè)置輸入框的外邊距為0
            inputObj.style.margin="0";
            //將td添加
            tdObj.appendChild(inputObj);
            //將tdObj添加到tdArr中
            tdArr.push(tdObj);
        }
    }
    function saveData() {
        tdArr[0].innerHTML=id;
        tdArr[1].innerHTML=name;
        tdArr[2].innerHTML=age;
        tdArr[3].innerHTML=sex;
        tdArr[4].innerHTML=phone;
        tdArr.length=0;
    }
</script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: