使用jQuery动态创建一个表格(根据用户输入的内容添加一行数据,并且能逐行删除)
2012-03-22 20:49
1276 查看
<!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-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现添加、移除表格</title>
</head>
<style>
table{
margin:auto auto;
background-color:#9FC;}
td{
width:80px;}
</style>
<script language="javascript" type="text/javascript" src="../../include/jquery.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function (){
$("#btn1").click(function (){
//创建tr节点
var $tr=$("<tr></tr>");
//遍历获取输入的内容
$("#info input:text").each(function (index,domEle){
//添加td节点
var $td=$("<td></td>");
//将内容循环添加到创建好的TD中
$td.append($(domEle).val());
//将td添加到创建好的TR 中
$td.appendTo($tr);
});
//创建TD--删除
var $td=$("<td><a href='#' class='del'>delete</a></td>");
//将内容循环添加到创建好的TD中
$td.appendTo($tr);
$tr.appendTo("#tab");
//执行删除操作
$(".del").click(function (){
//alert("@@@@@@@@@@@@");
$(this).parent().parent().remove();
});
});
});
</script>
<body>
<form id="info" method="post">
姓名:<input type="text" id="user">
班级:<input type="text" id="greed">
年龄:<input type="text" id="age">
<input type="button" id="btn1" value="添加">
</form>
<br>
<br>
<br>
<table id="tab" border="1">
<tr id="t1">
<td>姓名</td>
<td>班级</td>
<td>年龄</td>
<td>是否删除</td>
</tr>
</table>
</body>
</html>
效果图如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现添加、移除表格</title>
</head>
<style>
table{
margin:auto auto;
background-color:#9FC;}
td{
width:80px;}
</style>
<script language="javascript" type="text/javascript" src="../../include/jquery.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function (){
$("#btn1").click(function (){
//创建tr节点
var $tr=$("<tr></tr>");
//遍历获取输入的内容
$("#info input:text").each(function (index,domEle){
//添加td节点
var $td=$("<td></td>");
//将内容循环添加到创建好的TD中
$td.append($(domEle).val());
//将td添加到创建好的TR 中
$td.appendTo($tr);
});
//创建TD--删除
var $td=$("<td><a href='#' class='del'>delete</a></td>");
//将内容循环添加到创建好的TD中
$td.appendTo($tr);
$tr.appendTo("#tab");
//执行删除操作
$(".del").click(function (){
//alert("@@@@@@@@@@@@");
$(this).parent().parent().remove();
});
});
});
</script>
<body>
<form id="info" method="post">
姓名:<input type="text" id="user">
班级:<input type="text" id="greed">
年龄:<input type="text" id="age">
<input type="button" id="btn1" value="添加">
</form>
<br>
<br>
<br>
<table id="tab" border="1">
<tr id="t1">
<td>姓名</td>
<td>班级</td>
<td>年龄</td>
<td>是否删除</td>
</tr>
</table>
</body>
</html>
效果图如下:
相关文章推荐
- 使用jQuery动态创建一个表格,根据用户数输入的内容添加一行数据
- 使用jQuery动态创建一个表格,根据用户数输入的内容添加一行数据
- 使用jquery实现表格的动态添加和删除
- 关于从后台传来的json数据,使用jquery动态展现所有的item,给每个item添加删除功能
- jquery动态添加删除一行数据
- 点击添加按钮,使用ajax动态添加一行和移除一行,并且序号重新排序和数据不重复操作判断
- Jquery动态删除添加表格中的内容
- jquery实现在一个框中输入内容,点击添加后,在另外一个框中显示出来,且能删除
- 使用jquery给指定的table动态添加一行、删除一行
- 使用jquery动态创建和删除表格
- 初学Html5+CSS之表格添加用户+删除用户+修改数据+删除全部+批量删除+查询数据+内容判断
- 一个简单的jQuery例子,动态添加表格和删除
- 在Web.Config文件中使用configSource,避免动态修改web.config导致asp.net重启(另添加一个Config文件用于管理用户数据)
- jquery动态添加删除一行数据示例
- jquery动态添加删除一行数据示例
- 使用Java的输入输出流技术将Input.txt的内容逐行读出,每读出一行就顺序为其添加行号(从1开始,逐行递增),并写入到另一个文本文件Output.txt中
- 在Web.Config文件中使用configSource,避免动态修改web.config导致asp.net重启(另添加一个Config文件用于管理用户数据)
- spool命令、创建一个表,创建并且copy表,查看别的用户下的表,rowid行地址 索引的时候使用,表的增删改查,删除表,oracle的回收站
- jquery 动态添加一行数据,支持动态删除
- JQUERY动态绘制表格,实现动态添加一行,删除一行