jquary 表單輸入內容 表格接收 分頁符
表格的懸浮換色 點擊換色 隔行換色
$("tr:even").addClass("gaoliang");
$("tr").mouseover(function(){
$(this).addClass("xf");
}).mouseout(function(){
$(this).removeClass("xf");
}).click(function(){
$(this).addClass("dianji")
})
分頁符一個元素和第二個元素禁用
$("ul>li").click(function(){
$(this).addClass("active");
$("li:eq(0)").addClass("disabled");
$("li:last").addClass("disabled");
})
表單輸入內容新增到表單
$(".btn").click(function(){
var inp1 = $(".in1").val();
var inp2 = $(".in2").val();
var inp3 = $(".in3").val();
var newtr = $("<tr><td><input type=‘checkbox‘ value=‘‘ name=‘‘ class=‘ch‘/><td>"+inp1+"</td><td>"+inp2+"</td><td>"+inp3+"</td></tr>");
newtr.appendTo("tbody");
由於新加的表單實在加載事件以後完成 就得不到前面設置的背景換色，於是讓它重新接收一次
newtr=$("tr:even").addClass("gaoliang");
newtr = $("tr").mouseover(function(){
$(this).addClass("xf");
}).mouseout(function(){
$(this).removeClass("xf");
}).click(function(){
$(this).addClass("dianji")
})
})
復選框的全選和全選之後的刪除
$("td>.sel-all").click(function(){
$(".ch").attr("checked","checked");
})
。。。刪除。。。沒效果
$("td>.del-all").click(function(){
$(".ch.parentElement.parentElement").remove();
})
})
CSS
<style type="text/css">
table{
width: 600px;
height: 500px;
border: 1px solid #000000;
margin: 0 auto;
}
.gaoliang{
background-color: cadetblue;
}
.xf{
background-color: darkgrey;
}
td{
border: 1px solid #000000;
width: 190px;height: 50px;
text-align: center;
}
.hove{
background-color: bisque;color: white;
}
.dianji{
background-color: #000000;color: red;
}
ul{
margin: 0 auto;
}
</style>
HTML：
<body>
<form>
商品<input type="text" value="" name="" class="in1" />
口味<input type="text" value="" name="" class="in2" />
數量<input type="text" value="" name="" class="in3" />
<input type="button" value="添加" name="" class="btn" />
</form>
<form>
<table>
<thead>
<tr>
<td><button class="sel-all">全選</button><button class="del-all">刪除</button></td>
<td>商品</td>
<td>口味</td>
<td>數量</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</form>
<ul class="pagination">
<li><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li ><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
jquary 表單輸入內容 表格接收 分頁符