jquery小例子:动态生成表格和无刷新评论
<html>
<head><title>jquery动态生成表格小例子</title>
<script type="text/javascript" src="jquery/jquery-1.4.3.js"></script>
<style type="text/css">
.test{border:1px solid #0033ff font-size 10px;}
</style>
<script type="text/javascript">
$(function() {
$("#btn").click(function(){
var name = $("#name").val();
var age = $("#age").val();
var str=$("<tr><td>"+name+"</td><td>"+age+"</td></tr>"); //注意拼接字符串前加上$
$("#tab").append(str);//添加
$("#name").val(""); //清空文本框的值
$("#age").val("");
});
});
</script>
</head>
<body>
name:<input type="text" id="name">age:<input type="text" id="age" >
<input type="button" value="点我" id="btn">
<table border="1" id="tab">
<tr><td>姓名</td><td>年龄</td></tr>
</table>
</body>
</html>
--
<%--
Created by IntelliJ IDEA.
User: changying
Date: 11-1-6
Time: 上午11:21
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=GBK" language="java" %>
<html>
<head><title>jquery无刷新评论</title>
<script type="text/javascript" src="jquery/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
var title = $("#title").val();
var comment = $("#txtBody").val();
var str = $("<tr><td>" + title + "</td><td>" + comment + "</td></tr>");
$("#tbComment").append(str);//添加
$("#title").val("");//清空文本框的值
$("#txtBody").val("");
});
});
</script>
</head>
<body>
<p>我的都一个帖子 哈哈啊</p>
<table id="tbComment">
<tr>
<td>匿名</td>
<td>沙发</td>
</tr>
</table>
<input type="text" id="title"/><br>
<textarea id="txtBody"></textarea><br>
<input type="button" value="提交" id="btn"> <br>
</body>
</html>
