<!--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属性更改的更多相关文章

  1. 【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选

    页面点击按钮添加一行    删除一行   全选   反选  全不选 页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> & ...

  2. 小生功能贴<一> --- 动态添加应用 具有长按删除功能

    ---恢复内容开始--- 动态添加应用 具有长按删除功能 功能如下图:                (图片显示功能不是你要的,那就默默关闭页面吧) 设计思路: 页面一:用girdview网格显示图标 ...

  3. GrideVlew提供点击按钮添加新数据,单击项目修改,长按删除功能

    package com.example.wang.myapplication; import android.app.AlertDialog; import android.content.Dialo ...

  4. FineUI 点击按钮添加标签页

    <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat=&quo ...

  5. TEXT文本编辑框3 点击按钮添加文本至文本输入框

    In this exercise a function that loads the texts of an internal table into the text window, is imple ...

  6. C#点击按钮添加标签

    <asp:Button ID="button1" runat="server" Text="创建" onclick="But ...

  7. 点击按钮在表格的某一行下,在添加一行(HTML+JS)

    使用js在指定的tr下添加一个新的一行newTr html代码: <table> <tr> <td>用户名:</td> <td><in ...

  8. element+vue点击新增表格内在已有数据添加一行带输入框内容

    在element+vue项目中,需求要表格内已有数据,点击新增在首行添加一行带输入框内容 table的数据为datas=[],那么下面是一列的数据,多列可循环或复制 <el-table-colu ...

  9. JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里

    JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...

随机推荐

  1. java动态规划导弹问题

    这是一道动态规划题,和昨天的取硬币还有最长公共字串有点类似. 1.题目描述:                        某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一 ...

  2. 【HDU4967】Handling the Past

    题意 模拟栈操作.有三种操作push,pop,peak分别代表从栈顶压入元素,删除栈顶元素,查询栈顶元素.但是,每个操作会给出一个时间戳,要求操作必须要按照时间戳来进行.但是对于每个peak必须马上给 ...

  3. Codeforces 712D DP

    题意:有2个人玩游戏,他们都有个初始值a和b, 游戏进行t轮, 每次可以选择加上一个[-k, +k]之间的数字,问有多少种方案a的和严格大于b的和. 思路:如果不考虑多于这个条件,只是询问有多少种方案 ...

  4. EXADATA智能扫描

    提要:查询特定的要求:智能扫描只可用于完整的表或索引扫描.智能扫描只能用于直接路径读取: 直接路径读取会自动用于并行查询. 直接路径读取可以用于串行查询.默认情况下不使用它们进行小型表的串行扫描.使用 ...

  5. 云计算 Restfull API 设计之旅

    http://fedoraproject.org/wiki/Cloud_APIs_REST_Style_Guide#Introduction_to_REST   http://docs.spring. ...

  6. How to Get the Length of File in C

    How to get length of file in C //=== int fileLen(FILE *fp) { int nRet = -1; int nPosBak; nPosBak = f ...

  7. 大前端涉猎之前后端交互总结2:使用PHP进行表单数据上传与更新

    1:使用PHP进行表单上传 1.1 form表单的数据收集 HTML页面: 代码解释:核心模块是form的属性: --提交方式 :  method="post" --指定 name ...

  8. 特征工程 vs. 特征提取

    “特征工程”这个华丽的术语,它以尽可能容易地使模型达到良好性能的方式,来确保你的预测因子被编码到模型中.例如,如果你有一个日期字段作为一个预测因子,并且它在周末与平日的响应上有着很大的不同,那么以这种 ...

  9. [置顶] bzoj 1036 树的统计Count 点权值模板

    树链剖分 点权型可做模板,链路剖分的思想把点hash到线段树的上,然后可通过n*(log(n)*log(n))的复杂度在树上操作,在线段树上能操作的在链路上都能操作. #include<cstd ...

  10. C# 同步锁 lock Monitor

    Lock关键字 C#提供lock关键字实现临界区,MSDN里给出的用法: Object thisLock = new Object();lock (thisLock){   // Critical c ...