81,090
社区成员
发帖
与我相关
我的任务
分享
<!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=gb2312" />
<script type="text/javascript" src="css_js/jquery/jquery-1.3.2.min.js"></script>
<title>jquery操作表格测试</title>
<style type="text/css">
.cl1{
background-color:
}
.cl2{
background-color:#FFFF99;
}
</style>
<script type="text/javascript">
var tableCount = 0;
var colCount = 2;
function del(_id){
var tableTr = $("#testTable .tr_"+_id).hide();
tableCount--;
}
function addRow(){
tableCount++;
var addRowTemplete = '<tr class="tr_'+tableCount+'"><td class="cl1">'+tableCount+'</td><td class="cl1">内容'+tableCount+'</td><td class="cl1"><a href="javascript:void(0)" onclick=del('+tableCount+');>删除</a></td></tr>';
var tableHtml = $("#testTable tbody").html();
tableHtml += addRowTemplete;
$("#testTable tbody").html(tableHtml);
}
function addCol(){
colCount++;
$("#testTable tr").each(function(){
var trHtml = $(this).html();
trHtml += "<td onclick='delCol("+colCount+")'>曾加的td</td>";
$(this).html(trHtml);
});
}
function delCol(_id){
$("#testTable tr").each(function(){
$("td:eq("+_id+")",this).hide();
colCount--;
});
}
function chgBkColor(_id){
$("#testTable tr:not(:first)").each(function(){
$("td:eq("+_id+")",this).removeClass("cl1");;
$("td:eq("+_id+")",this).addClass("cl2");;
});
}
function reBkColor(_id){
$("#testTable tr:not(:first)").each(function(){
$("td:eq("+_id+")",this).removeClass("cl2");;
$("td:eq("+_id+")",this).addClass("cl1");;
});
}
</script>
</head>
<body>
<table width="487" border="1" id="testTable">
<tr>
<td onclick="delCol(0)">序号</td>
<td onclick="delCol(1)" onmousemove="chgBkColor(1);" onmouseout="reBkColor(1)">内容</td>
<td onclick="delCol(2)" onmousemove="chgBkColor(2);" onmouseout="reBkColor(2)">操作</td>
</tr>
</table>
<p>
<input type="button" name="Submit" value="添加行" onclick="addRow()" />
<input type="button" name="Submit2" value="添加列" onclick="addCol()"/>
</p>
</body>
</html>
<dl>
<dt>文章的评论</dt>
<dd>A说:写的不错。。</dd>
<dd>B说:还行吧。。。</dd>
</dl>
<textarea id="msg"></textarea>
<button id="bt_ok">提交</button>
<script>
$(document).ready(function(){
$("#bt_ok").click(function(){
$.ajax({
method:"post",
url:"submitComment.jsp",
data:"msg="+$("#msg").val();
success:functioin(data){
if(data=='ok'){
$("dd:last").after("<dd>"+$("#msg").val()+"</dd>");
$("#msg").val("");
}
}
error:function(){
alert("error!");
}
});
});
});
</script>