jquery动态添加或删除表(table)的行(tr)

最新推荐文章于 2021-09-07 11:04:03 发布

π大新

最新推荐文章于 2021-09-07 11:04:03 发布

阅读量3.9k

点赞数 2

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/u011870547/article/details/50680846

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

功能描述：点击表格某一行之后的按钮实现对该行的添加删除操作（实现后为下图）

代码：

<span style="font-size:18px;"><%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<html>
<head>
<title>add tr demo</title>
<style type="text/css">
	.datatable td {
	border-bottom: 1px solid #e4e5e5;
	height: 35px;
	line-height: 35px;
	text-align: left;
	padding-left: 10px;
	}
</style>
<script type="text/javascript"	src="/AddTrDemo/js/jquery-1.9.1.js"></script>
<script type="text/javascript" charset="UTF-8">

	function addTr(obj){
	     var tr = $(obj).parent().parent().clone();  //当前obj的父节点td的父节点tr
	     tr.appendTo("#fatable");
/* 	     $("#fatable tr:last input[type=text]").val(0);    默认值设置为0*/

	}
	function delTr(obj){
		var trlen = $("#fatable tr").length;
		if(trlen==1){
			showError('Cannot Be Deleted');
			return false;
		}
		$(obj).parent().parent().remove(); 
	}
</script>

</head>
<body style="text-align:center">
	<form id="" method="post" action="">
		<div class="pop-body">
			<div style="padding:0 20px; margin-top:10px;margin-bottom: 20px;">
                 <div style="position:relative; z-index:1000px;">
                   <table width="100%">
                     <tbody><tr>
                       <th width="22%">Plan </th>
                       <th width="2%">|</th>
                       <th width="22%">Quantity (packs)</th>
                       <th width="2%">|</th>
                       <th width="22%">Quantity (tickets)</th>
                       <th width="2%">|</th>
                       <th width="22%">Amount (riels)</th>
                       <th width="8%"> </th>
                     </tr>
                   </tbody></table>
                 </div>
                 <div id="box" style="border:1px solid #ccc;">
                   <table id="fatable" class="datatable" cellpadding="0 " cellspacing="0" width="100%">
                     <tbody>
                     <tr>
                       <td width="22%">
                       	   <select style="width: 230px" name="planCode">
	                       </select>
                       </td>
                       <td width="2%"> </td>
                       <td width="22%"><input type="text"  name="packages"/></td>
                       <td width="2%"> </td>
                       <td width="22%"><input type="text"  name="tickets"/> </td>
                       <td width="2%"> </td>
                       <td width="22%"><input type="text"  name="amount"/> </td>
                       <td width="4%">
                       		<img src="/AddTrDemo/img/add.png"  οnclick="addTr(this);" height="16px" width="16px"/>
                       </td>
                       <td width="4%">
                       		<img src="/AddTrDemo/img/cross.png"  οnclick="delTr(this);" height="16px" width="16px"/>
                       </td>
                     </tr>
                   </tbody></table>
                 </div>
           </div>
		</div>
	</form>

</body>
</html></span>

π大新

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
jquery动态添加或删除表(table)的行(tr)

功能描述：点击表格某一行之后的按钮实现对该行的添加删除操作（实现后为下图）代码：<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>add tr demo .datatable td { border-bottom: 1px solid #e
复制链接

扫一扫