JavaScript实现动态表格效果

2024-08-02 01:28:38

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

代码：

<!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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JS实现从表格中动态删除指定行的方法

本文实例讲述了JS实现从表格中动态删除指定行的方法.分享给大家供大家参考.具体如下: JS的表格对象有一个deleteRow方法用于删除表格中的指定行,只需要指定行号即可 <!DOCTYPE html> <html> <head> <script> function deleteRow(r) { var i=r.parentNode.parentNode.rowIndex; document.getElementById('myTable').deleteR
JavaScript如何动态创建table表格

两种JavaScript动态创建table表格的方法,分享给大家,具体实现如下方法一:最原始的方法,创建一一元素 var a1=document.createElement("table"); var a2=document.createElement("tbody"); var a3=document.createElement("tr"); var a4=document.createElement("td"); //开
js动态修改表格行colspan列跨度的方法

本文实例讲述了js动态修改表格行colspan列跨度的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <script> function setColSpan() { var x=document.getElementById('myTable').rows[0].cells; x[0].colSpan="2"; x[1].colSpan="6"; } </sc
JS实现动态表格的添加，修改，删除功能(推荐)

1. 首先在页面中配置好一个表格框架 <tr> <td>新增参数:</td> <td class="pn-fcontent"><input type="button" value="选择" onclick="openAppParamsPage();"/></td> <td>参数列表:</td> <td class="
JS实现向表格中动态添加行的方法

本文实例讲述了JS实现向表格中动态添加行的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码通过表格对象的insertRow方法动态向表格的最顶端添加新的行 <!DOCTYPE html> <html> <head> <script> function insRow() { var x=document.getElementById('myTable').insertRow(0); var y=x.insertCell(0); var z=x.ins
JavaScript中动态向表格添加数据

利用JavaScript ,动态向表格中添加数据,其实方法很简单的,下面给大家分享下实现方法 1. 首先先写出表格的表头和主干部分 <table width="600" border="1" cellspacing="0"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>职位</th> <th>
JS实现动态生成表格并提交表格数据向后端

本文实例介绍了JS实现动态生成表格并向后端提交表格数据的相关代码,分享给大家供大家参考,具体内容如下先来看一下需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 那么我们首先需要解决的是动态生成表格的问题 1.首先我们需要导入JS库文件. <script src="../js/jqui/jquery/jquery-1.5.2.min.js" type="text/javascript"></
js生成动态表格并为每个单元格添加单击事件的方法

html: 复制代码代码如下: <html> <head> <title>Demo</title> </head> <body> <label style="font-size:20px;width:600px;" >动态表格:</label><br/> <table border="1"> <tbody id="table&qu
javascript如何动态加载表格与动态添加表格行

一.动态加载表格 1.首先在html中为表格的添加位置设置id 即是在html的body标签内部写一个div标签表明表格要添加到此div的内部.如下 <div id="tdl"><div> 2.在javascript中写添加表格的语句若在当前html文件中,则写在<script>标签内部,如复制代码代码如下: <script type="text/javascript" > document.getElement
JS实现动态生成html table表格的方法分析

本文实例讲述了JS实现动态生成html table表格的方法.分享给大家供大家参考,具体如下: 刚在论坛上面逛的时候看到有人问html表格怎么动态生成,我回了一下发现有好多小伙伴追问- - 看来还是有很多人不会的啊,于是决定写个博来解救万千小伙伴于水火之中(mdzz) 首先我们要在html里面有如下代码: <table> <tbody id="tbody1"> </tbody> </table> 如果想在table里面加其他的可以随便加(

JavaScript实现动态表格效果

相关推荐

随机推荐