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(){
$('[class*="active"]').removeClass(); //首先将所有的active类删除
$(this).addClass("active"); //点击的元素添加active类样式
var index = $(this).index(); //得到当前点击元素的下标
if(index==1){ //判断 当当前点击是第二个按钮时
$('[class*="disabled"]').removeClass("disabled"); //首先将所有的disabled类删除
$(".fenye:first-child").addClass("disabled"); //将第一个元素添加disabled类
$(".fenye:last-child").removeClass("disabled");
}
if(index==$("li").length-2){
$('[class*="disabled"]').removeClass("disabled");
$(".fenye:last-child").addClass("disabled");
$(".fenye:first-child").removeClass("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(){
$("tbody>tr").removeClass("dianji"); //不点击时，背景消失 ----将所有的点击时背景类删除
$(this).addClass("dianji");
$("thead>tr").removeClass("dianji"); //表头不应该点击变色
})
})
复选框的全选和全选之后的删除
$("td>.sel-all").click(function(){
$(".ch").attr("checked","checked");
})
$("td>.del-all").click(function(){
var nn = $(".ch");
for (var i=0;i<nn.length;i++) {
if(nn[i].checked){
$(nn[i].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>
