JQuery实现表格行当复制
当需要动态添加数据时,需要动态的改变表格的行数,并且每行的类型应该相同,此时可以使用下面的代码来完成需求
function delRow(obj) {
if(window.confirm("你确定要删除该属性吗?")) {
var num = $("#configTable tr").size();
if(num <= 1) {
alert("请至少保留一行");
return;
}
var jTR = $(obj).parent().parent();
jTR.remove();
}
}
function addRow() {
var JTable = $("#configTable");
var JTr = $("#configTable tr").eq(0);
var JTrClone = JTr.clone(true);
var TD = JTrClone.find("td:eq(5)");
var SELECT = TD.find("select[name='enumValue']");
var INPUT = TD.find("input:eq(0)");
SELECT.empty().append($("<option>枚举值</option>"));
INPUT.val("text");
TD.hide();
var JInput = JTrClone.find("input:eq(0)");
var JSelect = JTrClone.find("select:eq(0)");
for(var i=0;i<JInput.length;i++) {
JInput.val("");
}
JSelect.get(0).options[0].selected = true;
JTrClone.appendTo(JTable);
}
<table id="configTable" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="right" style="width:100px;">属性名</td>
<td align="left" style="vertical-align:middle;padding-left:3px;height:30px;">
<ui:textfield name="propertyKey"/>
</td>
<td align="right" style="width:100px;">属性类型</td>
<td align="left" style="vertical-align:middle;padding-left:3px;height:30px;">
<select οnchange="enumConfig(this);" name="selectValue">
<option value="text">文本类型</option>
<option value="date">日期类型</option>
<option value="enum">枚举类型</option>
</select>
</td>
<td align="center" style="padding-left:10px;">
<button type="button" class="stk-button stk-button-st-3" class="stk-button-icon ui-icon-circle-close"></span><span></span></button>
</td>
<td style="padding-left:10px; display:none;">
<input type="hidden" name="propertyType" value="text"/>
<input type="hidden" name="propertyValue" />
<select οnkeydοwn="enumDown(event,this);" οnkeypress="enumPress(event,this);" name="enumValue">
<option>枚举值</option>
</select>
</td>
</tr>
</table>
转载于:https://blog.51cto.com/2342615/600134
JQuery实现表格行当复制相关推荐
- html怎么复制到Excel表格里,把页面html导出到excel表格数据-如何将网页中的表格快速复制到EXCEL中...
如何将html里面的table导出成excel 使用table2excel插件需要在页面中jquery和jquery.table2excel.js文件. HTML结构 你可以将任何的HTML表格结构的 ...
- iview表格批量复制粘贴
iview表格批量复制粘贴 页面引入jq,vue cli项目先npm install jquery --save,再在页面中引入jq 表格盒子外设置id(方便jq绑定盒子内部的粘贴事件),页面初始化给 ...
- jquery计算表格列,求和
jquery计算表格列,求和 有时候,需要统计网页上数据总数,系统没有提供该功能,需要手动计算,于是设计了这段代码 效果展示: 核心代码: $(function() {var totalRow = 0 ...
- 使用jquery合并表格中相同文本的相邻单元格
一.效果 二.代码 <!DOCTYPE HTML> <html> <head><title>Example</title><meta ...
- 我的jQuery动态表格插件二
本篇博客是我写在离职后,昨天刚辞职和交接完任务,准备离开.其实我有很多不舍,但是最终还是选择了离开,许多苦楚都埋在我的心底.哎,趁回成都找工作的机会是该好好休息一下了. 在上篇我的jQuery动态表格 ...
- jquery实现表格的多行删除
初学jquery,发现自己比较脑残的一味百度,找到一些代码,就想着运行,出现问题不知道怎么解决. 下面介绍如何运用jquery实现表格的多行删除 首先如果你没有jquery类库,要先下载jquery类 ...
- 手机端html表格,jQuery Mobile 表格
jQuery Mobile 表格 响应式表格 响应式设计一般用于适配用户各种移动设备. 我们只需要使用一个简单的类名,jQuery Mobile 就能根据屏幕的尺寸自动调整页面内容. 响应式表格让页面 ...
- jQuery实现表格隔行换颜色:
jQuery实现表格各行换颜色: 截图如下: 代码如下: <span style="font-family:Microsoft YaHei;font-size:14px;"& ...
- jQuery实现表格行上移下移和置顶
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
最新文章
- 373. Find K Pairs with Smallest Sums (java,优先队列)
- c# 任务栏托盘图标鼠标进入MouseEnter和鼠标离开MouseLeave实现
- win10下c/c++隐藏进程
- Intel Realsense 如何获取已连接所有摄像头的序列号参数?context() query_devices() size() camera_info device_list
- python or妙用
- python async_python async with和async for的使用
- 集合的定义与并查操作(C语言)
- python清空列表_Python之列表
- 苏州大学文正学院计算机专业,苏州大学文正学院有哪些专业及什么专业好
- 龙星电脑横机制版软件_简用仓库管理软件v8.6.3-简用仓库管理软件电脑版下载...
- 计算机二级office学习之Excel操作题考点整理
- iZotope RX 7 Advanced混音插件使用教程
- 邮件服务器公网IP被国外反垃圾联盟(PBL)列入黑名单移除操作方法
- 数字IC后端知识扫盲——OCV(上)
- Linux下的一些时间说明
- 分享一个免费好用的pdf转word工具
- SPSS 自动线性建模 模型导出方法
- 构造和析构函数的调用
- 目标检测之Loss:FasterRCNN中的SmoothL1Loss
- 签名签名签名签名签名签名签名
热门文章
- Java 8系列(一): 日期/时间- JSR310( Date and Time API)
- MongoDB文档对象字段属性合并的2种转换方法
- Django自身的CBV列表
- Jquery通过ajax请求NodeJS返回json数据
- 常见非关系型数据库(NoSQL)推荐介绍
- 用软件lm_sensors监测Linux系统和CPU温度(转)
- 对硬连接与软件连接的理解
- linux03-用户与组
- C语言 显示数组元素的值和地址
- java file.canexecute_Java File canExecute()用法及代碼示例