点击按钮添加一行,和本行的删除功能,序号变动,name属性更改
<!--html结构-->
<div>
<input type="button" value="添加一行" onclick="add_this(this,'table','need_add')">
<table border="1" >
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr name="need_add">
<td>1</td>
<td><input type="text" name="te_name_1" size="10"></td>
<td><input type="text" name="te_age" size="3">
<td><input type="button" value="删除此行" onclick="delete_this(this)"></td>
</tr>
</table>
</div>
/*js方法*/
/**
删除此行元素
v: 删除按钮
*/
function delete_this(v){
var tr=$(v).parent().parent();//找到按钮所在的tr
var tb=$(tr).parent();//找到要操作的table
var l=$(tb).find("tr:[name=need_add]").length;//当前可以操作的行数
if(l>1){
$(tr).remove();//多于1 直接移除
}else{//只剩一条时,置空
$(tr).find("td").each(function(){
$(this).find("input:text").each(function(){
$(this).val("");
});
});
}
if(l>1){
for( var len=1;len<l-1;len++){//tr 多于一条时,移除一条,遍历剩余条数
var e_tr=$(trs)[len];//得到某个tr节点
$(e_tr).find("td")[0].innerText=(len);//修改序号
$($(e_tr).find("td")[1]).find("input")[0].name="te_name_"+len;//修改里面的input值
}
} }
/**
*添加一行元素
v:当前按钮
t:按钮同级的table
name:table中需要复制的tr的name属性
*/
function add_this(v,t,name){
var table=$(v).parent().find(t)[0];//获取同级父元素的下table
var trs=$(table).find("tr:[name="+name+"]");//找到table中需要复制的tr
if(trs.length>0){
var pr_tr=$(trs[trs.length-1]);//最后一个tr
var new_tr=$(pr_tr).clone();//复制,得到新的tr
$(new_tr).find("td").each(function(){//对tr下的每个td
$(this).find("input:text").each(function(){//对td下的input置空
$(this).val("");
});
});
var pr_num=$(pr_tr).find("td")[0].innerText;//得到上一个tr的序号
var new_num=parseInt(pr_num)+1;
var new_td=$(new_tr).find("td")[0];
new_td.innerText =new_num; //修改序号
var new_name=$($(new_tr).find("td")[1]).find("input")[0].name='te_name_'+new_num;//修改name属性
$(pr_tr).after(new_tr); //向后添加
}
}
点击按钮添加一行,和本行的删除功能,序号变动,name属性更改的更多相关文章
- 【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选
页面点击按钮添加一行 删除一行 全选 反选 全不选 页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> & ...
- 小生功能贴<一> --- 动态添加应用 具有长按删除功能
---恢复内容开始--- 动态添加应用 具有长按删除功能 功能如下图: (图片显示功能不是你要的,那就默默关闭页面吧) 设计思路: 页面一:用girdview网格显示图标 ...
- GrideVlew提供点击按钮添加新数据,单击项目修改,长按删除功能
package com.example.wang.myapplication; import android.app.AlertDialog; import android.content.Dialo ...
- FineUI 点击按钮添加标签页
<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat=&quo ...
- TEXT文本编辑框3 点击按钮添加文本至文本输入框
In this exercise a function that loads the texts of an internal table into the text window, is imple ...
- C#点击按钮添加标签
<asp:Button ID="button1" runat="server" Text="创建" onclick="But ...
- 点击按钮在表格的某一行下,在添加一行(HTML+JS)
使用js在指定的tr下添加一个新的一行newTr html代码: <table> <tr> <td>用户名:</td> <td><in ...
- element+vue点击新增表格内在已有数据添加一行带输入框内容
在element+vue项目中,需求要表格内已有数据,点击新增在首行添加一行带输入框内容 table的数据为datas=[],那么下面是一列的数据,多列可循环或复制 <el-table-colu ...
- JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里
JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...
随机推荐
- Android中Activity的四种启动方式
谈到Activity的启动方式必须要说的是数据结构中的栈.栈是一种只能从一端进入存储数据的线性表,它以先进后出的原则存储数据,先进入的数据压入栈底,后进入的数据在栈顶.需要读取数据的时候就需要从顶部开 ...
- go反射实例
需求分析: 如在rocketmq的网络通信中,所有通信数据包以如下形式传输: (注:rocketmq的java结构体,这里使用了go形式表示) type RemotingCommand struct ...
- fidder 自动保存请求内容
背景: 因为公司有有app和sdk,这些项目没有对应的接口统计.重构的时候很容易忽略掉.所以对fiddler写了一点代码,能将请求的数据写入到文件或者数据库中.方便统计接口,下次重构的时候,方便统计影 ...
- 混合开发Js bridge新秀-DSBridge iOS篇
这个DSBridge 和我之前开发做的混合开发 用的方式 很相似,所以觉得很是不错,推荐给你大家. DSBridge-IOS:https://github.com/wendux/DSBridge-IO ...
- tomcat安装后,双击start.bat闪退的问题
1.jdk环境变量没有配 解决方案:我的电脑-属性-高级-环境变量,新增下面三个环境变量: ①JAVA_HOME=C:\Program Files\Java\jdk1.7.0_09(就是你jdk安装的 ...
- rtx 导出所有部门和用户
1>添加Interop.RTXServerApi.dll的引用 2>RTXServerApi.RTXObjectClass和RTXServerApi.RTXObject实现一样,建议使用R ...
- Python 中 "is" 与 "==" 操作有什么区别?
转自:https://foofish.net/what-is-difference-between-is-and-euqals.html 在 Python 中,比较两个对象(变量)是否相等,可以用 & ...
- 文件上传控件asp:FileUpload
前端 使用的控件<asp:FileUpload ID="fileup" runat="server" /><span class=" ...
- Docker 实现的 redis 主从
计划用 Docker 实现 Redis 的主从,简单主从而已.主的名称叫 redis-master 一步步来. 先新建个Dockerfile ,从alpine 开始,比较简单. FROM alpine ...
- Sublime Text 2 安装配置插件
最近学习python,看网上推荐用sublime text2挺方便,就学习了一下对sublime text2 安装插件,先放在这里,以备以后查找 根据晚上资料修改,原文请看这里 Python的自动补全 ...