动态生成表格和添加删除单元格

于 2022-05-25 19:20:20 发布
阅读量187 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/donggua123011/article/details/124971982
版权

在html中只需要写thead即可，tbody里面的内容通过动态来生成watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6YWS6YW_5bCP5bCP5rGk5ZyG,size_12,color_FFFFFF,t_70,g_se,x_16

 样式watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6YWS6YW_5bCP5bCP5rGk5ZyG,size_20,color_FFFFFF,t_70,g_se,x_16

 

在js中，使用数组来存放模拟的对象，一个对象即是一条数据，一条数据也即是一行的内容。在此需要使用两个for循环，外层来控制有多少行，内层来控制每行有多少个单元格（类似于打印三角形）。

 

外层循环的次数根据数组的长度来定，长度是几就创建几行，然后在循环体内进行创建行、添加行。内层循环使用for...in来获取对象的属性，有几个属性就创建几个单元格。通过obj[k]的方式将属性值赋值给单元格，再添加单元格。

 

由于最后一列是删除，需要单独创建单元格，方法同上（删除两字用标签包起来，便于删除操作获取）。删除的时候首先获取到所有的"删除"，利用循环鼠标点击的时候触发事件发生。（注：当点击a删除当前a所在行(链接爸爸的爸爸)this.parentNode.parentNode)watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6YWS6YW_5bCP5bCP5rGk5ZyG,size_20,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6YWS6YW_5bCP5bCP5rGk5ZyG,size_12,color_FFFFFF,t_70,g_se,x_16 

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6YWS6YW_5bCP5bCP5rGk5ZyG,size_20,color_FFFFFF,t_70,g_se,x_16 

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6YWS6YW_5bCP5bCP5rGk5ZyG,size_20,color_FFFFFF,t_70,g_se,x_16 

 

 

酒酿小小汤圆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js动态添加删除表格
05-24
NULL 博文链接：https://jeasony.iteye.com/blog/353914
Javascript动态创建表格及删除行列的方法
10-24
// 将表格添加到div中 } ``` 这个函数会根据用户输入的行数和列数创建相应的表格，并在每个单元格内放置一个链接，显示行号和列号。`removeAllChild`函数用于清除div内的所有子元素，确保每次创建表格时都是全新的...
动态表格添加删除
qq_28569939的博客
09-07 274
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <style> div { text-align: center; margin: 50px; } table { .
php动态删除表格的行,动态添加删除表格行的js实现代码
weixin_28968629的博客
03-18 125
本篇文章主要是对动态添加删除表格行的js实现代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助//窗口表格增加一行function addNewRow(){var tabObj=document.getElementById("myTab");//获取添加数据的表格var rowsNum = tabObj.rows.length; //获取当前行数var colsNum=tabObj....
表格的动态添加和删除
weixin_30448685的博客
11-23 187
一.动态的向表格中添加行； （1）.首先得获取表格对象，table 　　通过id获取表格对象：var table=document.getElementById("表格id"); （2）.向表格中添加行使用insertRow(index);其中index为行添加在table中的下标，（下标从0开始，若table当前行数为n，那么若index=n，则刚好在表格行末添加新的一行；换句话说，如果要...
动态给表格添加删除行
qq_57401304的博客
06-03 78
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
jQuery实现表格行和列的动态添加与删除方法【测试可用】
10-21
本文将详细讲解如何使用jQuery实现表格行和列的动态添加与删除功能，这对于创建交互式数据展示页面至关重要。 首先，我们需要一个基本的HTML结构来承载表格。下面的代码展示了这样一个表格： ```html 序号 (1...
jQuery动态生成表格及右键菜单功能示例
10-20
在本示例中，我们将深入探讨如何使用jQuery来动态生成表格以及实现右键菜单功能。首先，我们需要了解jQuery的基本概念。jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在这...
vue+elementUI实现动态表格合并单元格.zip
09-26
- Vue 的 `v-for` 指令用于循环遍历数组，生成表格的行。每行数据可以通过一个对象表示，每个对象的属性对应表格的列。 - `v-if` 或 `v-show` 指令可以用来控制表格行或单元格的显示与隐藏，实现增删行的功能。 2...
前端：表格内容的添加和删除
05-13
本教程将深入讲解如何在HTML表格中实现内容的添加和删除功能，这对于掌握DOM操作和理解JavaScript、CSS及HTML的基础应用至关重要。 首先，我们需要创建一个基本的HTML表格结构。HTML的`<table>`元素是表格的核心，...
javascript实现动态添加删除表格行
04-13
NULL 博文链接：https://1148130696.iteye.com/blog/1726191
TableLayout，实现动态添加和删除行，并实现统计表格中的数据
03-20
TableLayout，实现动态添加和删除行，判断行中的数据是否含有空值，可以手动地输入数据，也可以选择数据添加在表格中，并实现统计表格中的数据。
js动态创建表格
11-22
js动态创建表格，利用dom技术动态输入行列来创建表格
javaScript实现动态增删插入表格
07-16
javaScript实现动态增删插入表格
DOM操作-表格的动态实现添加删除
zwb1365237878的博客
12-21 679
通过点击创建的BUTTON按钮实现添加和删除的功能 <style type="text/css"> p{ text-align: center; } button{ width: 150px; } td{ height: 50px; text-align: center; } span{ color: white; font-size: 14px; cursor: pointer; padd
动态表格的添加和删除
qq_43113232的博客
09-15 351
动态表格的添加和删除（优化简单写法） &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;动态表格&a
juery 表格动态添加删除行内容
yang295242361的博客
12-29 419
方法一：  this item item item item 删除
动态添加表格中的单元格
web开发自学
09-17 109
function addRow() { with (document) { var tb = $('tb'); var row = createElement("tr"); var td = createElement("td"); td.appendChild(createTextNode($F('id'))); row.appendChild(td); ...
动态添加删除表格2
03-07 105
&lt;script type="text/javascript"&gt;//控制新增图片 var i=2;var num;function insRow(){ x=ttb98.insertRow(ttb98.rows.length); x.ln=i; var num=document.getElementById('num').value;var h1=x.insertCell(...
js动态生成表格需要单击来进行添加和删除
最新发布
06-02
是的，通常情况下，动态生成表格需要单击按钮来进行添加和删除行列。以下是一个示例代码： HTML代码： ```html <table id="myTable"> <tr> <th>姓名</th> <th>年龄</th> </tr> </table> <button onclick="addRow()">添加行</button> <button onclick="addColumn()">添加列</button> <button onclick="deleteRow()">删除行</button> <button onclick="deleteColumn()">删除列</button> ``` JavaScript代码： ```javascript function addRow() { var table = document.getElementById("myTable"); var row = table.insertRow(); var nameCell = row.insertCell(0); var ageCell = row.insertCell(1); nameCell.innerHTML = "张三"; ageCell.innerHTML = "25"; } function addColumn() { var table = document.getElementById("myTable"); var rows = table.rows; for (var i = 0; i < rows.length; i++) { var cell = rows[i].insertCell(); cell.innerHTML = "数据"; } } function deleteRow() { var table = document.getElementById("myTable"); table.deleteRow(-1); } function deleteColumn() { var table = document.getElementById("myTable"); var rows = table.rows; for (var i = 0; i < rows.length; i++) { rows[i].deleteCell(-1); } } ``` 在这个示例中，我们添加了两个按钮，`deleteRow()`函数用于删除表格的最后一行，`deleteColumn()`函数用于删除表格的最后一列。在这里，我们使用`deleteRow()`和`deleteCell()`方法来删除行和单元格。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值