表格的悬浮换色 点击换色 隔行换色
$("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>
原文地址：https://www.cnblogs.com/haijuanya/p/9446305.html