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

最新推荐文章于 2018-08-30 11:07:00 发布
原创 最新推荐文章于 2018-08-30 11:07:00 发布 · 2k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#table #数据库 #html #javascript #button #border

本文介绍了一个简单的数据库映射工具，该工具使用HTML和JavaScript实现，能够帮助用户建立目的数据库与源数据库之间的关系映射。通过选择不同的数据库选项，用户可以轻松地为数据迁移或同步任务定义映射规则。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

JS example：点击按钮table增加一行，删除一行
05-28
NULL 博文链接：https://pouyang.iteye.com/blog/622168
利用jquery给指定的table动态添加一行、删除一行的方法
10-21
这篇文章主要介绍了如何使用jQuery在指定的HTML表格（table）中动态地添加和删除行。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作，包括在表格中动态修改内容。 首先，我们要理解HTML表格的基本结构，一个...
Jquery 实现表格动态增加一行，删除一行
weixin_33859844的博客
05-04 409
需求是要实现表格的动态增加与删除，并且保留标题行和首行，找了半天jq插件，没找到合适的，所以自己写了个demo <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href="http://cdn.static.runoob.com/libs/bootstrap...
JS ：点击按钮table增加一行，删除一行
热门推荐
huangle63的专栏
04-18 1万+
<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> "> update_data.jsp
layui实现点击按钮给table添加一行
10-18
Layui 提供了一个 `table.reload()` 方法来重新加载表格数据，但在此场景下，我们只需要添加一行，所以不需要重新请求数据。为了解决这个问题，可以在添加行后调用 `table.resize()` 来更新表格的尺寸，以避免数据...
BootStrap给table表格的每一行添加一个按钮事件
08-29
通过上述步骤，我们可以轻松地为表格的每一行添加一个按钮事件。这种方法可以广泛应用于各种实际场景，例如数据编辑、删除、查看等等。同时，我们也可以根据需要自定义按钮事件的行为，以满足不同的业务需求。
使用jquery给指定的table动态添加一行、删除一行
01-19
支持在任意行添加一行且可配置的，如可在第一行添加一行、第二行添加一行、倒数第一行添加一行、倒数第二行添加一行，随需求的变化都不会影响。 前提条件：行数需在表中存在否则添加不成功。 2）、删除一行 支持动态...
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
10-15
当按钮被点击时，会调用一个方法`addLine`，这个方法会向`tableData`数组中添加一个新的空对象，这个对象代表了表格中的一行。 ```html 添加行数 <el-table :data="tableData" style="width:100%"> <!-- 表格...
table动态增加一行
08-29
table动态增加一行，点击增加可增加，点击删除可以进行删除
table动态添加行并编辑
09-12
table动态添加行并进行行数据编辑，数据修改等操作，动态操作table
table JS 添加行和删除行
06-07
table JS 添加行和删除行 实现JS添加table的一行和删除一行技术
添加按钮 table增加一行 删减按钮 table去掉一行
weixin_34138056的博客
08-30 591
需求描述：做的一个AA新增功能，同时可以为这个即将新增的AA添加内容，而且AA的内容默认展示一行列表，点击添加按钮后出现下一行列表 解决思路：页面首先展示一个表头和列表的一行，作为默认展示的一行列表，然后对增加按钮设置onclick，在onclick函数中动态的为table拼接<tr><td>；删除行，直接调用分装好的删除table一行的函数就行，其实这个函数我当时就试了...
table动态添加删除一行
小虾的博客
03-01 852
function del(obj) { $(obj).remove(); } function add(id,obj,listname) { var nameVal = obj.innerText; var str=$( ''+nameVal +''+' ' ); $('#'+listname).append(str); }
table 增加、删除一行
nlbss的博客
07-30 998
前两天项目有个需求是需要在页面中的表格增加一行连签规则的，研究了好一阵，记录下来。 $("table tr:last").after(trHTML); //这里找到table中的最后一个tr元素 将你需要拼接的内容拼接到后面，trHTML就是你需要拼接的内容 $("table tr").length //获取table下tr的个数 先看下效果图：【这里用到了在table中
按钮触发table添加一行删除一行
每天=生命的最后一天
08-16 1304
<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>addHtml.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <me
Table动态增加一行
iteye_5514的博客
11-29 224
对于动态增加一行、删除一行、删除所有行都可以操作成功。 &lt;%@ page language="java" import="java.util.*" pageEncoding="gb2312"%&gt;  &lt;%   String path = request.getContextPath();   String basePath = request.getScheme()+"://"+...
elementui如何控制table中某一行删除按钮不可用
最新发布
06-11
<think>嗯，用户询问的是如何在ElementUI的Table组件中禁用特定行的删除按钮。用户引用了多篇关于ElementUI的文章内容，但核心需求很明确，就是希望控制表格中某些行的删除按钮状态。回想ElementUI的Table组件机制，要实现行级按钮禁用通常有三种方式：通过scopedslot自定义按钮、使用row-class-name动态添加类名、或者结合v-if/v-show控制显示。用户提供的引用[3]提到动态禁用日期选择器，这种条件判断的思路可以借鉴到按钮控制上。用户给出的几个引用也很有参考价值。引用[1]提到ElementUI的设计原则是"可控性"，引用[2]则列举过一些表格"骚操作"，引用[4]里的/deep/选择器也适用于样式覆盖。这些都能作为实现方案的补充。看来用户应该是个中后台开发者，可能正在处理类似用户管理或数据审核的功能，有些数据行需要保护起来禁止删除。ta的提问方式很专业，直接锁定"特定行"这个关键点，说明对ElementUI已有基本了解。具体实现上要分几个层面考虑：首先模板里要用template+scope自定义按钮区域；然后在每个el-button上绑定动态disabled属性；最后在methods里根据scope.row数据判断是否禁用。考虑到性能问题，禁用逻辑要尽量简单。用户没有提到具体禁用规则，可能需要进一步确认是基于行数据的某个状态字段，还是需要手动勾选锁定。在回复里准备给出两种典型场景的实现方案比较稳妥。</think> 在ElementUI的Table组件中禁用特定行的删除按钮，可通过以下两种方式实现： --- ### 方法1：使用`scoped slot`动态绑定`disabled`属性 **核心思路**：通过作用域插槽自定义操作列，根据行数据条件动态设置按钮的`disabled`属性。 ```html <el-table :data="tableData"> <el-table-column label="操作"> <template #default="scope"> <!-- 根据行数据条件禁用按钮 --> <el-button type="danger" size="mini" :disabled="isDeleteDisabled(scope.row)" <!-- 关键：动态绑定 --> @click="handleDelete(scope.row)" >删除</el-button> </template> </el-table-column> </el-table> ``` ```javascript methods: { // 定义禁用条件（示例：status为0时禁用） isDeleteDisabled(row) { return row.status === 0; }, handleDelete(row) { if (this.isDeleteDisabled(row)) return; // 额外防护 // 正常删除逻辑 } } ``` **说明**： 1. 利用`scoped slot`访问当前行数据（`scope.row`） 2. `:disabled`绑定自定义函数，返回布尔值控制按钮状态 3. 在删除逻辑中可添加二次校验[^2] --- ### 方法2：通过`row-class-name`设置行样式（视觉禁用） **适用场景**：若需视觉强提示，可添加禁用样式： ```html <el-table :data="tableData" :row-class-name="rowClassName">...</el-table> ``` ```javascript methods: { rowClassName({ row }) { return row.status === 0 ? 'disabled-row' : ''; } } ``` ```css /* 禁用行按钮样式覆盖 */ .el-table .disabled-row .el-button { opacity: 0.5; cursor: not-allowed !important; } /* 深度选择器处理ElementUI样式穿透 */ /deep/ .el-table .disabled-row .el-button.is-disabled { background: #eee !important; } ``` --- ### 核心要点总结 | 方法 | 优势 | 注意事项 | |--------------|-------------------------------|----------------------------| | 动态属性绑定 | 精确控制交互状态，符合数据驱动 | 需校验删除逻辑的防御性代码[^3] | | 样式覆盖 | 视觉反馈明显 | 需用`/deep/`穿透组件样式[^4] | ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值