<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="#" style="float:left;position:absolute ;background-color: yellow;width:100%;height:100% " >
<fieldset style="width:100%;height:100%">
<p>
<label for="cusername">姓名</label>
<em>*</em><input id="cusername" name="username" size="25" />
</p>
<p>
<label for="cemail">電子郵件</label>
<em>*</em><input id="cemail" name="email" size="25" />
</p>
<p>
<label for="curl">網址</label>
<em> </em><input id="curl" name="url" size="25" value="" />
</p>
<p>
<label >價格</label>
<em> </em><input id="cprice" name="price" size="25" value="" />
</p>
<p>
<label for="ccomment">你的評論</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22" ></textarea>
</p>
<p>
<input class="submit" type="button" value="提交"/>
<input class="quxiao" type="button" value="取消"/>
</p>
</fieldset>
</form>
<div>
<form>
<input type="text" id="chaxun" /><input type="button" value="查詢" />
</form>
<div>
<input type="button" value="全選/全不選" id="CheckedAll"/>
<input type="button" value="反選" id='CheckedRev' />
<input id="add" type="button" value="新增"/>
<input type="button" value="刪除" class="deleteall" />
</div>
</div>
<table cellpadding="0" cellspacing="0" border="1" width="100%">
<thead><tr><td>姓名</td><td>電子郵件</td><td>網址</td><td>你的評論</td><td>價格</td><td>編輯</td><td>刪除</td></tr></thead>
<tbody>
<tr></tr>
</tbody>
<tfoot>
<tr><td>總價</td><td colspan="6">0</td></tr>
</tfoot>
</table>
</body>
<script type="text/javascript">
$(document).ready(function(){
// $("#commentForm").validate({meta: "validate"});
$("#commentForm").hide();
$("#add").bind("click",function(){
if($("#commentForm").is(":visible")){
$("#commentForm").hide();
}else{
$("#commentForm").show();
}
})
var num = 1;
$(".submit").click(function(){
$("#commentForm").hide();
var name = $('#cusername').val();
var email = $('#cemail').val();
var url = $('#curl').val();
var price = $('#cprice').val();
var comment = $('#ccomment').val();
var tr = $('<tr class="'+num+'"><td class="jsname"><input type="checkbox" value="'+num+'"/>'+name+'</td><td class="jsemail">'+email+'</td><td class="jsurl">'+url+'</td><td class="jscomment">'+comment+'</td><td class="jsprice" id="'+num+'">'+price+'</td><td><a href="#" class="edit">編輯</a></td><td><a href="#" class="delete">刪除</a></td></tr>');
$('tbody tr:eq(0)').after(tr);
num++;
});
$(".quxiao").click(function(){
$("#commentForm").hide();
});
$('.delete').live('click',function(){
$(this).parent().parent().remove();
});
$('.edit').live('click',function(){
var tr=$(this).parent().parent();
var name = tr.children('.jsname').text();
var email = tr.children('.jsemail').text();
var url = tr.children('.jsurl').text();
var comment = tr.children('.jscomment').text();
var price = tr.children('.jsprice').text();
$('#cusername').attr('value',name);
$('#cemail').attr('value',email);
$('#curl').attr('value',url);
$('#cprice').attr('value',price);
$('#ccomment').attr('value',comment);
$("#commentForm").show();
$(this).parent().parent().remove();
});
$('.deleteall').click(function(){
$('input[type="checkbox"]:checked').each(function(){
$(this).parent().parent().remove();
});
});
var a = true;
$("#CheckedAll").click(function(){
//所有checkbox跟著全選的checkbox走。
if(a){
$('input[type="checkbox"]:checkbox').attr("checked", true);
a = false;
}else {
$('input[type="checkbox"]:checkbox').attr("checked", false);
a=true;
}
});
$("#CheckedRev").click(function(){
$('input[type="checkbox"]:checkbox').each(function(){
this.checked=!this.checked;
});
});
});
</script>
</html>