在table中通过按钮添加一行或者删除一行

最新推荐文章于 2024-07-10 16:18:57 发布
最新推荐文章于 2024-07-10 16:18:57 发布
阅读量2k 收藏 2
点赞数 1
分类专栏： JavaScript 文章标签： table 数据库 html javascript button border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lixinchaoo/article/details/4097359
版权

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>目的数据库和源数据库关系映射</title>
<script language="JavaScript">
<!--
var rowIndex=0;
function addLine(obj){
var objSourceRow=obj.parentNode.parentNode;
var objTable=obj.parentNode.parentNode.parentNode.parentNode;
if(obj.value=='增加'){
rowIndex++;
var objRow=objTable.insertRow(rowIndex);
var objCell;
objCell=objRow.insertCell(0);
objCell.innerHTML=objSourceRow.cells[0].innerHTML;
objCell=objRow.insertCell(1);
objCell.innerHTML=objSourceRow.cells[1].innerHTML;
objCell=objRow.insertCell(2);
objCell.innerHTML=objSourceRow.cells[2].innerHTML.replace(/增加/,'删除');
}
else{
objTable.lastChild.removeChild(objSourceRow);
rowIndex--;
}
}
//-->
</script>
</head>
<body bgcolor="#ffffff">
<form name="form1" method="post">
<table width="450" border=0 align=center cellPadding="0" cellSpacing="1">
<tr>
<td width="200">目的数据库</td>
<td width="200">源数据库</td>
<td width="50"></td>
</tr>

<tr>

<td>
<select name="select">
<option value="" selected>选择</option>
<option value="1">第一</option>
<option value="2">第二</option>
</select></td>

<td><select name="select">
<option value="" selected>选择</option>
<option value="1">第三</option>
<option value="2">第四</option>
</select></td>

<td>
<input name="add" type="button" id="add" value="增加" onClick="addLine(this)">
</td>

</tr>

</table>
</form>
</body>
</html>

lixinchaoo
关注
专栏目录
table动态增加一行
08-29
table动态增加一行，点击增加可增加，点击删除可以进行删除
JS example：点击按钮table增加一行，删除一行
05-28
NULL 博文链接：https://pouyang.iteye.com/blog/622168
Jquery 实现表格动态增加一行，删除一行
weixin_33859844的博客
05-04 378
需求是要实现表格的动态增加与删除，并且保留标题行和首行，找了半天jq插件，没找到合适的，所以自己写了个demo <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href="http://cdn.static.runoob.com/libs/bootstrap...
element el-table实现表格动态增加/删除/编辑表格行，带校验规则
最新发布
qq_61869009的博客
07-10 2820
element el-table实现表格动态增加/删除/编辑表格行，对每一行数据增加校验规则
Table动态增加一行
iteye_5514的博客
11-29 190
对于动态增加一行、删除一行、删除所有行都可以操作成功。 &lt;%@ page language="java" import="java.util.*" pageEncoding="gb2312"%&gt;  &lt;%   String path = request.getContextPath();   String basePath = request.getScheme()+"://"+...
利用jquery给指定的table动态添加一行、删除一行的方法
10-21
这篇文章主要介绍了如何使用jQuery在指定的HTML表格（table）中动态地添加和删除行。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作，包括在表格中动态修改内容。 首先，我们要理解HTML表格的基本结构，一个...
layui实现点击按钮给table添加一行
10-18
Layui 提供了一个 `table.reload()` 方法来重新加载表格数据，但在此场景下，我们只需要添加一行，所以不需要重新请求数据。为了解决这个问题，可以在添加行后调用 `table.resize()` 来更新表格的尺寸，以避免数据...
BootStrap给table表格的每一行添加一个按钮事件
08-29
通过上述步骤，我们可以轻松地为表格的每一行添加一个按钮事件。这种方法可以广泛应用于各种实际场景，例如数据编辑、删除、查看等等。同时，我们也可以根据需要自定义按钮事件的行为，以满足不同的业务需求。
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
10-15
当按钮被点击时，会调用一个方法`addLine`，这个方法会向`tableData`数组中添加一个新的空对象，这个对象代表了表格中的一行。 ```html 添加行数 <el-table :data="tableData" style="width:100%"> <!-- 表格...
使用jquery给指定的table动态添加一行、删除一行
01-19
支持在任意行添加一行且可配置的，如可在第一行添加一行、第二行添加一行、倒数第一行添加一行、倒数第二行添加一行，随需求的变化都不会影响。 前提条件：行数需在表中存在否则添加不成功。 2）、删除一行 支持动态...
table动态添加行并编辑
09-12
table动态添加行并进行行数据编辑，数据修改等操作，动态操作table
table JS 添加行和删除行
06-07
table JS 添加行和删除行 实现JS添加table的一行和删除一行技术
通过点击添加按钮即可自动添加一行点击删除即可自动删除一行
07-17
通过点击添加按按钮即可自动添加一行，通过点击删除按钮即可自动删除一行。这个是一个很好的例子。代码简洁，用javasript实现的。
jquery点击添加按钮添加新的一行
12-03
用jquery的clone方式，点击添加按钮添加新的一行。
TABLE下插入行
greatzheng的专栏
07-31 782
TABLE下插入行，应该用这样的方法：1) var row = tbody.insertRow(index); 在tbody（注意不能用table）中指定的位置插入一行，返回行的引用（这是IE专用的方法）2) tbody.appendChild(row); 在tbody的末尾插入行3) tbody.insertBefore(row,index);在指定的位置插入行4) tbody.
jquery table动态添加一行
katherine_1207的专栏
09-28 1003
var trHTML = '' +                              '    ' +                              '        " >' +                              '                                     '            editable="fals
在页面table中通过按钮控制增加或删除一行tr
小栋哟
10-11 3441
效果图 点击添加即出现新的一行空白数据，并赋值id；删除是根据checkbox选中一个或多个删除； 废话不多说，直接上代码，相信大家可以看懂； html部分 &lt;div class="zl-sqrxx-con"&gt; &lt;table id="addCourse"&gt; &lt;tr&gt; ...
iview table表格点击外部按钮删除行添加行
06-03
要实现这个功能，你需要做以下几个步骤： 1. 在 iView table 中，添加两个按钮，一个用于删除行，一个用于添加行。 2. 在按钮的 click 事件中，分别调用 table 的 remove() 和 append() 方法来删除和添加行。 3. 要实现点击外部按钮删除行的功能，你需要在页面中使用 ref 来获取到 table 的实例，然后在按钮的 click 事件中，通过 $refs.table 来调用 remove() 方法。 4. 同样的，要实现点击外部按钮添加行的功能，你也需要在页面中使用 ref 来获取到 table 的实例，然后在按钮的 click 事件中，通过 $refs.table 来调用 append() 方法。 下面是一个示例代码： ```html <template> <div> <Button @click="removeRow">删除行</Button> <Button @click="addRow">添加行</Button> <Table :data="tableData" ref="table"> <TableColumn prop="name" label="姓名"></TableColumn> <TableColumn prop="age" label="年龄"></TableColumn> <TableColumn prop="address" label="地址"></TableColumn> </Table> </div> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, address: '北京市' }, { name: '李四', age: 20, address: '上海市' }, { name: '王五', age: 22, address: '广州市' }, ], }; }, methods: { removeRow() { this.$refs.table.remove(this.tableData[0]); }, addRow() { this.$refs.table.append({ name: '赵六', age: 24, address: '深圳市' }); }, }, }; </script> ``` 在这个示例中，我们在 iView table 中添加了两个按钮，并分别绑定了 removeRow() 和 addRow() 两个方法。在这两个方法中，我们分别通过 $refs.table 来调用了 table 的 remove() 和 append() 方法来删除和添加行。同时，我们也使用了 ref 来获取到了 table 的实例。这样，就可以实现在外部按钮中删除和添加 table 表格行的功能了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值