jquery动态添加删除一行数据示例_jquery

复制代码 代码如下:

<html>
<head>
<title>添加、删除一行</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function() {
$("#addOneRow").click(function() {
var tempTr = $("tr:first").clone(true);
$("tr:last").after(tempTr);
$("tr:last > td > #name").val("");//新添加行name为空
$("tr:last > td > #address").val("");//新添加行address为空
});
$(".delOneRow").click(function() {
if ($("tr").length < 2) {
alert("至少保留一行!");
} else {
if (confirm("确认删除?")) {
$(this).parent().parent().remove();
}
}
});
});
</script>
</head>

<body>
<table border="1">
<tr>
<td>姓名:</td>
<td><input type="text" id="name" name="name" />
</td>
<td>地址:</td>
<td><input type="text" id="address" name="address" /></td>
<td><input type="button" class="delOneRow" value="删除" /></td>
</tr>
</table>
<input type="button" id="addOneRow" value="添加一行" />
</body>

</html>

时间: 2024-11-18 06:30:05

jquery动态添加删除一行数据示例_jquery的相关文章

jquery动态添加删除一行数据示例

 这篇文章主要介绍了jquery如何动态添加删除一行数据,需要的朋友可以参考下 <html> <head> <title>添加.删除一行</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/

jquery动态添加删除div 具体实现

这篇文章介绍了jquery动态添加删除div实现代码,有需要的朋友可以参考一下   复制代码 代码如下: <script type="text/javascript" src="jquery.js"></script> <body> <form action="" method="post" enctype="multipart/form-data"> <

jquery动态添加删除div

jquery动态添加删除div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-

JQuery实现动态添加删除评论的方法_jquery

本文实例讲述了JQuery实现动态添加删除评论的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

jQuery动态添加删除select项(实现代码)_jquery

复制代码 代码如下: // 添加function col_add() { var selObj = $("#mySelect"); var value="value"; var text="text"; selObj.append("<option value='"+value+"'>"+text+"</option>");}// 删除function col_d

jQuery动态添加删除与添加表行代码

具体实现代码如下: table的HTML如下:  代码如下 复制代码 <input type="button" value="添加一行" /> <table> <tr><td><input type="button" class = "del" value="删除该行"/></td></tr> </table>

jquery动态添加删除(tr/td)_javascript技巧

代码很简单,实现的功能也很简单,有需要的小伙伴参考下吧. 复制代码 代码如下: <head runat="server">     <title></title>     <!--easyui -->     <link rel="stylesheet" type="text/css" href="../../script/jquery-easyui-1.3.2/themes/ico

js dom动态添加删除表格数据的例子

学习了两天的 js dom 高级操作应用,实例代码基本上都听懂了,只是自己还没有能力全部敲出来,因为 js 操作 table 的代码太多了,js 对节点操作除了 div 之外,也可以更好的操作表单,这两天学到的是 js 如何进行对 table 的操作,当然也遇到了神奇的 js 增删改查,虽然没有用到数据库,但其效果蛮给力的,本来视频的代码想要一行一行敲下来,只是脑子里太乱了,只能从网上把视频上的代码给拷贝下来,仅供自己参考使用吧,这里的代码是关于 js 动态添加与删除表格数据的,感觉有点意思,回

Js实现动态添加删除Table行示例_javascript技巧

最近做项目遇到要动态添加.删除表格行的操作,实现如下 html代码 复制代码 代码如下: <table cellpadding="0" cellspacing="0" border="1" style="margin:auto; width:96%;" id="LearnInfoItem"> <tr > <td colspan="8" bgcolor=&qu