使用jquery给表格添加行

hesai_vip

浏览: 207366 次
性别:
来自: 广州

最近访客更多访客>>

adyfang

smallswan

sunbing_ctgu

promiseloney

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

@工作项目相关

本人不太会jquery，今天弄这个弄了半天，最终还是好友帮忙，才终于有了我想要的那一点效果。

不过，我想都统一放到一个页面，不知道数据库存取的时候，会不会很麻烦。

先把静态的代码贴上。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
			href="tab-basic2.css">
		<script type="text/javascript"
			src="jquery-1.3.2.min.js"></script>
		<script language="javascript">
	var max_line_num = 1;
	var line = '';
	function add_line() {
		max_line_num = $("#list tbody tr:last-child").children("td").html();
		if (max_line_num == null) {
			max_line_num = 1;
		} else {
			max_line_num = parseInt(max_line_num);
			max_line_num += 1;
		}

		var list_str = "<tr >" + "<td style='width: 10%;'>"
				+ ($("#mainTable").find("tr").length-2)
				+ "</td>"
				+ "<td style='width: 10%;'><input type='text' value='任务" + max_line_num + "' size='10'/></td>"
				+ "<td style='width: 10%;'><input type='text' value='1' size='5'/></td>"
				+ "<td style='width: 20%;'><input type='text' value='2012-04-09' size='10'/></td>"
				+ "<td style='width: 20%;'><input type='button' value='暂存'/><input type='button' value='删除'/></td>" 
				+ "</tr>";
		$("#mainTable").append(list_str);
		var sss1 = $("#mainTable").find("tr").length-2;
		$("#trtd").attr("rowspan",$("#mainTable").find("tr").length - 2);
		var sss = $("#mainTable").html();
	}
</script>
	</head>
	<body>
		<table width="99%" id="mainTable">
			<tr>
				<td colspan="6">
					<font color="red">[2012年4月]给 user 1  考核任务：</font>
					<div align="right">
						<input type="button" value="新增周任务"/>
					</div>
				</td>
			</tr>
			<tr>
				<td style="width: 10%;">
					考核周
				</td>
				<td style="width: 10%;">
					工作任务序号
				</td>
				<td style="width: 10%;">
					工作任务
				</td>
				<td style="width: 10%;">
					计划工作量
				</td>
				<td style="width: 20%;">
					计划完成时间
				</td>
				
				<td style="width: 20%;">
					操作
				</td>

			</tr>
			<tr id="trid">
					<td width="10%" id="trtd" rowSpan="2">
						<select>
							<option>
								第一周
							</option>
							<option>
								第二周
							</option>
						</select>
						<br>
						<a onclick="add_line();" href="#">添加任务</a>&nbsp;&nbsp;
					</td>
		     </tr>
			<tr>
				<td style="width: 10%;">
					1
				</td>
				2012-4-12
				<td style="width: 10%;">
					<input type="text" value="工作任务一" size="10"/>
				</td>
				<td style="width: 10%;">
					<input type="text" value="1" size="5"/>
				</td>
				<td style="width: 20%;">
					<input type="text" value="2012-04-09" size="10"/>
				</td>
				
				<td style="width: 20%;">
					<input type="button" value="暂存"/><input type='button' value='删除'/>
				</td>

			</tr>
		</table>
	</body>
</html>