JavaScript 동적 표 효과 구현

5305 단어 js동적 표
본 논문 의 사례 는 자 바스 크 립 트 가 동적 표 효 과 를 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.

코드:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>    </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;
            /*                     ,          */
            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>    </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()">    </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);
        //  5 td
        for (let i = 0; i < 5; i++) {
            let tdObj = document.createElement("td");
            trObj.appendChild(tdObj);
            //  input     
            let inputObj = document.createElement("input");
            //  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";
            //       
            inputObj.style.width="80px";
            //       
            inputObj.style.height="25px";
            //          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>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기