日期:2014-05-16 浏览次数:20352 次
<!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>
<title>测试</title>
<script src="./JS/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/JavaScript">
$(document).ready(function(){
$("#addDataRow").click(function(){
for(var i=0;i<3;i++){
var newRow = $("#filmRow").clone();
newRow.find("#fNum").html($("#table1 tr").length);
newRow.find("#fName").html("速度与激情"+$("#table1 tr").length);
newRow.find("#fDir").html("惊险刺激");
newRow.appendTo("#table1");
$("#table1 tr:last").click(function(){
var fNum=$(this).find("#fNum").text();
var fName=$(this).find("#fName").text();
var fDir=$(this).find("#fDir").text();
alert("序号: "+fNum+"\r名字: "+fName+"\r说明: "+fDir);
});
}
});
$("#table1 tr:first").attr("style","backGround-Color:#ccc");
});
</script>
</head>
<body>
<table id="table1" border="1" style="width:300px; text-align:center;">
<tr height="50%" id="filmRow">
<td id="fNum">序号</td>
<td id="fName">电影</td>
<td width="50%" id="fDir">说明</td>
</tr>
</table>
</br>
<input type="button" value="追加数据" id="addDataRow"/>
</body>
</html>