javascript制作表格

JavaScript实现动态表格效果

本文实例为大家分享了JavaScript实现动态表格效果的具体代码,供大家参考,具体内容如下

javascript制作表格(JavaScript实现动态表格效果)

代码:

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>动态表格</title>
        <style>
            .bigli{
                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;
                /*在弹性盒对象的 <li> 元素中的各项周围留有空白*/
                justify-content: flex-end;
            }
        </style>
    </head>
    <body>
    <li class="bigli">
    <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>
    <li class="but">
        <button type="button" onclick="addRow()">添加一行</button>
        <button type="button" onclick="saveData()">保存数据</button>
    </li>
    </li>
    <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>
    
  • 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签: