table表的行的增加和删除

最新推荐文章于 2024-09-06 11:26:45 发布
最新推荐文章于 2024-09-06 11:26:45 发布
阅读量101 收藏
点赞数
分类专栏： javaScript 文章标签： xhtml javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shuiganhengdaolima/article/details/83971267
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="../../../jquery-1.7.js"></script>
</head>

<body>
    <table border="1" id="tableAdd">
        <tr align="center">
            <td width="100px;">展馆</td>
            <td width="100px;">展位类型</td>
            <td width="100px;">数量</td>
            <td width="100px;">
                <input type="button" value="新增" id="addRow"/>            
            </td>        
        </tr>
    </table>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function(){
        var rowNum=0;
        //新增行
        $("#addRow").bind("click",function(){
            rowNum +=1;
            var rowHtml="";
            rowHtml +="<tr id='"+rowNum+"'>";
                rowHtml +="<td>"+rowNum+"</td>";
                rowHtml +="<td></td>";
                rowHtml +="<td></td>";
                rowHtml +="<td>";
                    rowHtml +="<input type=\"button\" value=\"删除\" name=\"deleteRow\" οnclick=\"deleteRow("+rowNum+")\" />";
                rowHtml +="</td>";
            rowHtml +="</tr>";
            //alert(rowHtml)
            $("#tableAdd").append(rowHtml);            
        })    
    })
        //删除行
    function deleteRow(num){
            $("#addRow").parent().parent().parent().find("#"+num).remove();        
        }
</script>

shuiganhengdaolima
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
table中添加或删除行
qq_43445758的博客
12-13 515
table中添加或删除行 insertRow创建行 insertCell创建列 节点.deleteRow(删除目标)删除行 <html> <head> <title></title> <meta name="" content="" charset="utf-8" /> </head> <style type="text/css"> #k input { width: 40px; } ta
table插入行、删除行、撤销操作
dreamof2015的博客
05-25 1527
table中插入行、删除行操作、撤销操作: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试js创建dom生成的html如何换行</title> <style> .editor...
【vue+a-table】动态增加表格行动态删除表格行，通过点击按钮实现增加
花椒和蕊的博客
10-25 4464
1、首先是table和button，table的数据源通过点击按钮追加，每次点击追加一条 table的每一列都设置插槽，用来获取动态表格的值 <a-table :dataSource="parameters" :columns="addtableColumnc" > <template v-for="col in ['ParamName', 'ParamDescription']" :slot="col" slot-scope="text, record"...
Ant Desgin VUE ＜a-table＞ 行新增、删除、自定义行样式、处理行数据
Leonardo_zhang的博客
04-21 4774
页面效果展示 编写Columns，给表格绑定参数 columns部分 表格行新增 直接在数组中新增空数据，后续数据由弹窗回掉产生，当然这边也可自定义新增数据内容。 表格行删除 跟据对应的key，过滤出subData中不需要的值即可。 弹窗方法部分 通过this.$refs.modalBomForm调用子页面弹出 表格页面编辑内容保存 table 行编辑数值保存到subData数组 handleChange方法直接过滤出变动的行，修改数组中的对应参数值即可。 完整代码 弹窗部分代码未放出，新增、删除
vue + Ant Design之table自定义表格、添加操作按钮并获取当前行数据
热门推荐
陈新科的博客
09-16 1万+
今天搞了一下午可算搞懂了，网上我查了好多资料发现好像有点老了都 比如这种的： <template slot="action" slot-scope="text,record"> <a slot="action" href="javascript:;" @click="onUser(record)">用户</a> <a slot="action" href="javascript:;" @click="onRole(recor
antd ＜a-table＞ 增加自增序号+分页
qq_41549657的博客
08-13 2741
使用pagination组件来设置分页 1.在table中引入pagination <a-table :pagination="pagination":columns="columns" @change="tableChange" :data-source="data" size="small" bordered> a-table> 2.在data返回值中初始化pagination pagination: { total: 0, /
js实现对table的增加行和删除行的操作方法
10-21
对于动态地在网页上的table增加行和删除行的操作，是非常常见的需求，尤其在处理动态数据展示的场景中。以下是对在JavaScript中实现对table增加行和删除行操作的详细知识点说明。 ### 增加行的操作方法 增加行通常...
JavaScript获取表格（table）当前行的值、删除行、增加行
10-24
在JavaScript中，操作HTML表格（table）是一种常见的需求，包括获取当前行的值、删除行以及增加行。本文提供了一段代码示例，演示了如何实现这些功能。 首先，我们来详细讲解如何获取表格当前行的值。在这个例子中...
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
10-15
Element UI是一个基于Vue 2.0的组件库，提供了丰富的UI组件，其中包括表格（Table）组件，非常适合用于实现复杂的表格操作，如添加、修改、单独删除以及批量删除行。本文将详细介绍如何在Element UI的表格组件中实现...
javascript完整操作Table的增加行，删除行的列子大全
10-30
### JavaScript 完整操作 Table 的增加行与删除行知识点详解 #### 一、引言 在 Web 开发中，表格（Table）是非常常见的一种数据展示形式。JavaScript 提供了丰富的 API 来操作 DOM（Document Object Model），使得...
第二百一十六节 JSF教程 - JSF基本标签、JSF表单文本框示例
2301_78772942的博客
09-05 390
第二百一十六节 JSF教程 - JSF基本标签、JSF表单文本框示例
【基础】Three.js加载纹理贴图、加载外部gltf格式文件
stay hungry, stay foolish
09-02 1483
.gltf（JSON文件）: 描述模型的主要结构，包括几何体、材质、动画、场景等。.bin（二进制文件）: 存储顶点数据、法线、UV坐标等二进制数据。纹理（.png, .jpg）: 存储模型使用的纹理贴图。。
vue3+vite 通过js引入的src，在打包后为什么不能显示
肖肖肖丽珠的博客
09-02 299
页面有个图片我是动态设置的。但是打包之后一直没有找到。我本来使用的绝对定位发现不行，改成了相对的也不行，最后改成下面的这种就可以啦。
跨页面进行数据通讯
榴莲不好吃的专栏
09-02 481
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
WHAT - React 函数与 useMemo vs useCallback
weixin_58540586的博客
09-03 831
目录介绍`useMemo` 与 `useCallback` 的区别示例代码`useMemo` 示例`useCallback` 示例总结 介绍 在 React 中，useMemo 和 useCallback 是两个用于性能优化的钩子，尽管它们有些相似，但各自有不同的用途和应用场景。理解它们的区别和适用情况可以帮助你更有效地管理组件的性能和状态。 useMemo 与 useCallback 的区别 useMemo: 目的: 用于记忆化（缓存）计算结果。它接受一个计算函数和依赖项数组，只有当依赖项发生变化时
在 Vue 中实现跨项目数据传递
世轩的博客
09-03 1300
需要注意的是，跨项目数据传递可能会带来一些安全和数据一致性的问题。在实际应用中，要根据具体情况选择合适的方法，并确保数据的安全性和可靠性。同时，对于敏感数据，应该采取加密等安全措施。
界面控件KendoReact中文教程 - 如何创建动态进度条？
最新发布
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
09-06 1047
本文主要介绍如何使用KendoReact ProgressBar和ChunkProgressBar组件在React应用程序中创建动态进度条，欢迎下载新版控件体验！
Nginx部署前端Vue项目
不会代码的小林
09-03 1309
Nginx是一款轻量级的高性能Web服务器，可以用于静态文件的托管和反向代理等场景。现在，您可以在浏览器中访问http://example.com（请替换为您自己的域名），应该可以看到Vue应用程序正在运行。请将example.com替换为您自己的域名，将/var/www/my-project/dist替换为Vue项目的dist目录的实际路径。现在，我们需要配置Nginx来托管Vue项目的静态文件。接下来，我们可以使用Vue CLI创建一个新的Vue项目。在部署之前，我们需要先构建Vue项目。
html table批量添加行与删除行,js实现对table的增加行和删除行的操作方法
05-12
要实现对 HTML 表格的增加行和删除行，可以使用 JavaScript。以下是实现的方法： 1. 添加行： 首先，获取到要添加行的表格对象（如 `var table = document.getElementById('myTable');`）。 然后，创建一个新的行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值