JQUERY动态生成报表 _Web前端

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<title>demo about table</title>
<script>
?$(document).ready(function(){??
??$("#but").click(function(){
???var $table=$("#tab tr");
???var len=$table.length;
??//?alert("tr length :"+len);
??//?alert(" content :"+"<tr id="+(len+1)+"><td align=\'center\'>"+len+"</td><td align=\'center\'>jQuery"+len+"</td><td align=\'center\'><a href=\'#\' onclick=\'deltr("+(len+1)+")\'>删除</a></td></tr>");
???
???$("#tab").append("<tr id="+(len+1)+"><td align=\'center\'>"+len+"</td><td align=\'center\'>jQuery"+len+"</td><td align=\'center\'><a href=\'#\' onclick=\'deltr("+(len+1)+")\'>删除</a></td></tr>");???
??})?
?})
?
?function deltr(index)
?{
?//?alert("tr[id=\'"+index+"\']");
??$table=$("#tab tr");
??if(index>$table.length)
???return;
??else
??{
???$("tr[id=\'"+index+"\']").remove();?
???//$("tr:gt('"+index+"')").each????
???for(var temp=index+1;temp<=$table.length;temp++)
???{
????//$("#tab").append("<tr id="+(temp-1)+"><td align=\'center\'>"+(temp-2)+"</td><td align=\'center\'>jQuery"+(temp-2)+"</td><td align=\'center\'><a href=\'#\' onclick=\'deltr("+(temp-1)+")\'>删除</a></td></tr>");
????$("tr[id=\'"+temp+"\']").replaceWith("<tr id="+(temp-1)+"><td align=\'center\'>"+(temp-2)+"</td><td align=\'center\'>jQuery"+(temp-2)+"</td><td align=\'center\'><a href=\'#\' onclick=\'deltr("+(temp-1)+")\'>删除</a></td></tr>");
???}?
??}?
?}
?
?
?
?
?
?
</script>
</head>