<meta charset="utf-8">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>利用jquery给指定的table添加一行、删除一行</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>
<script type="text/javascript">
////////添加一行、删除一行封装方法///////
/**
* 为table指定行添加一行
*
* tab 表id
* row 行数，如：0->第一行 1->第二行 -2->倒数第二行 -1->最后一行
* trHtml 添加行的html代码
*
*/
function addTr(tab, row, trHtml){
//获取table最后一行 $("#tab tr:last")
//获取table第一行 $("#tab tr").eq(0)
//获取table倒数第二行 $("#tab tr").eq(-2)
// var $tr=$("#"+tab+" tr").eq(row);
var tr=$("#tab tr").eq(row);
if(tr.size()==0){
alert("指定的table id或行数不存在！");
return;
}
tr.after(trHtml);
}

function delTr(ckb){
//获取选中的复选框，然后循环遍历删除
var ckbs=$("input[name="+ckb+"]:checked");
if(ckbs.size()==0){
alert("要删除指定行，需选中要删除的行！");
return;
}
ckbs.each(function(){
$(this).parent().parent().remove();
});
}

/**
* 全选
*
* allCkb 全选复选框的id
* items 复选框的name
*/
function allCheck(allCkb, items){
$("#"+allCkb).click(function(){
$('[name='+items+']:checkbox').attr("checked", this.checked );
});
}

////////添加一行、删除一行测试方法///////
$(function(){
//全选
allCheck("allCkb", "ckb");
});

function addTr2(tab, row){
var trHtml="<tr align='center'><td><input type='checkbox' name='ckb'/></td><td><input type='text' name='s1[]' class='ui-input met-center' style='width:100px;' value='' placeholder='学生姓名'></td><td><input type='text' name='s2[]' class='ui-input met-center' style='width:100px;' value='' placeholder='登录密码'></td><td><input type='text' name='s[]3' class='ui-input met-center' style='width:100px;' value='' placeholder='QQ'></td><td><input type='text' name='s4[]' class='ui-input met-center' style='width:100px;' value='' placeholder='手机'></td><td><input type='text' name='s5[]' class='ui-input met-center' style='width:100px;' value='' placeholder='监护人姓名'></td><td><input type='text' name='s6[]' class='ui-input met-center' style='width:100px;' value='' placeholder='监护人联系方式'></td></tr>";
addTr(tab, row, trHtml);
}

function delTr2(){
delTr('ckb');
}
</script>
<form action="07.php" method="post">
<table border="1px #ooo" id="tab" cellpadding="0" cellspacing="0" width="100%">
<tr align="center">
<td width="30"></td>
<td width="100">学生姓名</td>
<td width="100">登录密码</td>
<td width="100">QQ</td>
<td width="100">手机</td>
<td width="100">监护人姓名</td>
<td width="100">监护人联系方式</td>
</tr>
</table>
<input type="button" onclick="addTr2('tab', -1)" value="添加"><input type="button" onclick="delTr2()" value="删除">
<input type="submit" name="button" id="button" value="提交">
</form>
</body>
</html>

转载：

https://blog.csdn.net/haibo0668/article/details/77726318

js动态添加、删除行的更多相关文章

  1. js动态添加删除行，兼容ie和火狐

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. js动态添加onload、onresize、onscroll事件(另类方法)

    js动态添加onload.onresize.onscroll事件(另类方法)   window 的 onload.onresize.onscroll 事件,跟其他的事件不一样,它不能用 attachE ...

  3. form表单 无法提交js动态添加的表单元素问题。。

    第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url   ...

  4. 【原生js】js动态添加dom，如何绑定事件

    首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...

  5. 使用js动态添加组件

    在文章开始之前,我想说两点 1 自己初学js,文章的内容在大神看来可能就是不值一提,但是谁都是从hello world来的,望高   手不吝指教# 2 我知道这个标题起的比较蛋疼,大家看图就能说明问题 ...

  6. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  7. MUI 里js动态添加数字输入框后，增加、减少按钮无效

    numbox 的自动初化是在 mui.ready 时完成的mui 页面默认会自动初始化页面中的所有数字输入框,动态构造的 DOM 需要进行手动初始化.比如:您动态创建了一个 ID 为 abc 的数字输 ...

  8. 原生js动态添加style，添加样式

    原生js动态添加style,添加样式 第一种 var style="[assign-url='"+str+"']{display:initial}"; var ...

  9. Js动态添加复选框Checkbox

    Js动态添加复选框Checkbox的实例方法!!! 首先,使用JS动态产生Checkbox可以采用如下类似的语句: var checkBox=document.createElement(" ...

  10. js 动态添加表单 table tr

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. BZOJ-3105: 新Nim游戏 (nim博弈&线性基)

    pro: 传统的Nim游戏是这样的:有一些火柴堆,每堆都有若干根火柴(不同堆的火柴数量可以不同).两个游戏者轮流操作,每次可以选一个火柴堆拿走若干根火柴.可以只拿一根,也可以拿走整堆火柴,但不能同时从 ...

  2. zoj 2524 并查集裸

    Description There are so many different religions in the world today that it is difficult to keep tr ...

  3. linux磁盘分区笔记

    磁盘基本概念: 硬盘结构:盘片+磁头(盘片可以有多个),工作时盘片高速运转,磁头读取数据 U盘.SSD固态硬盘是用闪存来制作的设备,没有盘片和磁头 Linux磁盘文件名: Linux所有设备都抽象为文 ...

  4. 手机响应式echarts

    // 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 使用刚指定的配置项和数据 ...

  5. QT5.10+VS2013 TCP 一对一简单C/S架构通信

    ---恢复内容开始--- QT~俺老孙又回来啦~ 买的那本书上面关于tcp的内容就七八页,而且都是过于简单的东西,想进一步就要度娘很久很麻烦,还是喜欢看书(嘿嘿嘿~) 大致的思路就是两个项目,一个cl ...

  6. 2018-2019-2 20165313 《网络对抗技术》 Exp5：MSF基础应用

    实践使用漏洞和辅助模块 任务一:MS17-010安全漏洞 任务二:(1)MS11-050(失败)(2)MS14-064(唯一) 任务三:abode_flash_avm2 辅助模块:(1)ARP扫描模块 ...

  7. WMware Vsphere取消某虚机的漂移

    由于一些业务特性,有一些虚机不应该完全受集群DSR控制.下面记录一下如何更改某一虚机的漂移属性. 1.环境 VMware Vsphere web client 6.5 2.点击需要配置虚机所在的集群, ...

  8. sql注入-推断是否存在SQL注入-and大法和or大法

    来自:https://www.cnblogs.com/ichunqiu/p/5749347.html 页面不返回任何错误信息,我们就可以借助本方法来推断了,首先我们在参数后面加上 and 1=1和an ...

  9. Ubuntu 16下单机安装配置zookeeper和kafka

    网上其他的没有一个能直接照做完成的,我这个也是看了些帖子,整出来的怕以后忘记 建议连接工具:Bitvise SSH Client 一.安装配置zookeeper 下载zookeeper 3.4.13: ...

  10. RocketMQ基本概念及原理介绍

    基本概念 ProducerGroup 通常具有同样属性(处理的消息种类-topic.以及消息处理逻辑流程—分布式多个客户端)的一些producer可以归为同一个group.在事务消息机制中,如果某条发 ...