JavaScript实现动态表格

最新推荐文章于 2024-09-07 09:17:16 发布
最新推荐文章于 2024-09-07 09:17:16 发布
阅读量609 收藏
点赞数
文章标签： javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaosongxiaozi/article/details/122614736
版权

JavaScript实现动态表格
（改建版，代码见最下面）


基本效果如下
点击添加，可以将输入框中的值，新增到表格中；点击删除可以删除本行内容。


代码如下：
第一种方式（较简单，建议使用）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格02</title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>
</head>
<body>

<div>
    <input type="text" id="id" placeholder="请输入id值">
    <input type="text" id="name" placeholder="请输入姓名">
    <input type="text" id="gender" placeholder="请输入性别">
    <input type="button" id="btn_add" value="添加">
</div>

<table>
    <caption>学生信息表</caption>
    <tr>
        <th>id号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td>001</td>
        <td>小燕子</td>
        <td>女</td>
        <td><a href="javascript:void(0);" οnclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td>002</td>
        <td>紫薇</td>
        <td>女</td>
        <td><a href="javascript:void(0);" οnclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td>003</td>
        <td>永琪</td>
        <td>男</td>
        <td><a href="javascript:void(0);" οnclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td>004</td>
        <td>尔康</td>
        <td>男</td>
        <td><a href="javascript:void(0);" οnclick="delTr(this);">删除</a></td>
    </tr>
</table>

<script>
    //使用innerHTML给海口椰城医院添加按钮绑定事件
    var element = document.getElementById("btn_add");
    element.οnclick=function(){
        //获取文本框中的内容
        var id = document.getElementById("id").value;
        var name=document.getElementById("name").value;
        var gender=document.getElementById("gender").value;

        //获取table
        var table=document.getElementsByTagName("table")[0];
        //新增一行
        table.innerHTML+="<tr>"+"<td>"+id+"</td><td>"+name+"</td><td>"+gender+"</td><td>"
            +"<a href=\"javascript:void(0);\" οnclick=\"delTr(this);\">删除</a></td></tr>";
    }
    //删除方法
    function delTr(obj){
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;

        table.removeChild(tr);
    }
</script>
</body>
</html>

xiaosongxiaozi
关注
用JavaScript实现动态表格
qq_45736175的博客
08-22 1324
先来看一下效果 先捋一下思路： 要想实现动态效果，那就得使用增删节点的知识。 A.先来搞定添加的功能。 1.给添加按钮添加事件 2.获取输入框的内容,如var id = document.getElementById("id").value; 3.创建td、文本节点，这里有三个元素，id name 和gender 。 如：createElement("td") createTextNode(id) 注意在使用文本节点时，直接传参数就行，不要写成string格式。 4.把文本节点添加为t.
JavaScript实现动态生成表格
12-28
本文实例为大家分享了JavaScript实现动态生成表格的具体代码，供大家参考，具体内容如下 功能描述 在输入框中输入行和列，点击按钮，生成拥有对应行和列的表格。如下图所示： 分析 HTML界面设计 <body> 行：<input type=text id=row /> 列： <input type=text id=col /> <input type=button name=go id=go value=go onclick=add() /> </body> js代码部
DataTables 教程指南
最新发布
gitblog_01199的博客
09-07 372
DataTables 教程指南 datatableThe Missing Javascript Datatable for the Web项目地址:https://gitcode.com/gh_mirrors/dat/datatable 项目介绍 DataTables 是一个广受欢迎的 jQuery 插件，它专为增强 HTML 表格的功能而设计。通过分页、即时搜索和排序等功能，DataTable...
JS动态表格
qq_45387575的博客
02-25 2074
1、因为里面的数据都是动态的，需要JS来动态生成 ，数据采取对象形式存储 2、所有的数据都是放在tbody行里面 3、创建的行数对应多少人，用数组的长度来获取 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m...
Javascript实现动态表格
01-06 488
效果如下： "text/javascript">     function AddTR(){        //取得新增行数的ID值        var idval = document.getElementById("idval").value;        var table = document.getElementById("mytable");  //取得表格对
操作元素实例 -动态创建表格
热门推荐
qq_41853417的博客
09-24 1万+
动态创建表格： 涉及知识： node.createElement()创建元素节点<p> 父节点.appendChild(child)添加节点<p> node.removeChild(child)删除元素字节<p> 对象的操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="v
JavaScript实现动态增删表格的方法
10-20
本文将介绍使用JavaScript实现动态增删表格的方法。动态表格意味着可以在页面加载后，通过用户的操作来增减表格中的行。这种方法在数据展示、数据管理页面中非常实用。 首先，我们使用HTML来构建表格的基本结构，并...
基于JavaScript实现动态添加删除表格的行
12-28
又一个动态控制表格的效果，用JavaScript动态生成表格行、表格列，以及还可动态删除这些行列，行等，运行代码后，点击对应的功能按钮，即可实现对应的表格操作功能。 1.jsp 产品名称 编号 数量 重量 操作 ...
JavaScript动态生成表格
weixin_47304332的博客
04-09 5062
源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&g
js动态添加表格
08-01
javascript实现动态的添加表格功能
javascript动态创建表格
03-11
javascript动态创建表格,适合HTML语言初学者使用，亲测可用
js动态绘制表格，实现动态绘制，添加 和删除
05-23
js动态的绘制表格很好的例子，包括如何动态的去添加 修改 和删除表格 以及遍历表格内容
JavaScript 动态表格
07-20
用JavaScript制作的动态表格，有添加、删除、全选、全不选，有对动态新增的域校验问题，有对新增的域设置readonly问题，还有对新增域中的span进行隐藏问题都有解决，还有对动态表格的讲解PPT一份。
JavaScript创建动态表格
walking_dead_k的博客
12-02 859
创建动态表格 利用JavaScript，根据数据信息创建动态表格 <script> //1.准备学生数据 var datas = [{ name: '夏弥', subject: 'JavaScript', score: 59 }, { name: '路明非', subject: 'JavaScript' }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值