首先页面
<form name="so_list">
<div class="list_title">
<!-- tab title -->
<table class="tab_title" cellspacing="0" cellpadding="0" style="table-layout:fixed;width:100%;*width:auto;">
<tbody>
<tr>
<td class="borderleftnone" width="27px" valign="middle" style="padding:1px 0 1px 5px;"><input name="checkbox" type="checkbox" id="all" onclick="CheckAll(so_list)"/></td>
<td valign="middle" style="width:160px;padding:0; padding-left:15px;">商家名称</td>
<td valign="middle" style="width:130px;padding:0; padding-left:15px;">联系人名称</td>
<td valign="middle" style="width:130px;padding:0; padding-left:15px;">联系人电话</td>
<td valign="middle" style="width:180px;padding:0; padding-left:15px;">联系人邮箱</td>
<td class="min" valign="middle" style="padding:0; padding-left:15px;">商家地址</td>
<td valign="middle" style="width:80px;padding:0; padding-left:15px;">状态</td>
</tr>
</tbody>
</table>
</div>
<div class="list_block" style="height:auto;overflow-x: hidden; overflow-y: auto;">
<div class="list_content">
<table width="101%" cellpadding="0" cellspacing="0" class="business_list" id="business_list" style="table-layout:fixed;">
<tbody>
<tr class="gl" id="gl">
<td valign="middle" style="width:27px;padding:1px 0 1px 5px"><input name="checkbox" type="checkbox" id="2" /></td>
<td valign="middle" style="width:160px;padding:0; padding-left:15px;">COCO奶茶</td>
<td valign="middle" style="width:130px;padding:0; padding-left:15px;">王先生</td>
<td valign="middle" style="width:130px;padding:0; padding-left:15px;">13566451239</td>
<td valign="middle" style="width:180px;padding:0; padding-left:15px;">cocoTea@126.com</td>
<td valign="middle" class="min" style="padding:0; padding-left:15px;"> </td>
<td valign="middle" style="width:80px;padding:0; padding-left:15px;">待审核</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tooltab tooltab_bottom">
<div class="right">
<a href="#">首页</a>
<a href="#">上一页</a>
<a href="#">下一页</a>
<a href="#">末页</a>
<select class="wd_80">
</select>
</div>
<div class="nowrap left">
<input id="quick_browse" class="wd_50 btn" type="button" value="浏览" name="browse">
<input id="quick_create" class="wd_102 btn" type="button" value="创建商家帐号" name="create">
<input id="quick_edit" class="wd_50btn" type="button" value="编辑" name="edit" />
<input id="quick_del" class="wd_50btn" type="button" value="删除" name="del" />
<form class="search_subject" action="">
<input id="search_text" class="wd_200" type="text" />
<input id="quick_search" class="wd_50" type="submit" value="搜索" name="search" />
</form>
</div>
<div class="clr"> </div>
</div>
</form>
重要的是js
$(function(){
//由于要控制button,所以先获取按钮数组
var num = $(":button");
num.click(function(){
var j=0;
var id;
var check="";
//按钮单击,检查该行复选状态为true的,用j计数,用id捕获对象id标识
$(":checkbox[name='checkbox'][checked=true]").each(function(){
//没全选计数
if(this.id!="all"){
j=j+1;
id=this.id;
//统计捕获的id
check=check+","+this.id;
}
});
if(this.name!="del"){
if(j>1){
alert("sorry!只能选择一个用户");
}else{
if(j==0){
alert("请选择一个用户");
}else{
if(this.name=="browse"){
alert("浏览标识为"+id);
}else if(this.name=="create"){
alert("创建标识为"+id);
}else if(this.name=="edit"){
alert("修改标识为"+id);
}
}
}
}else{
if(j==0){
alert("请选择一个用户");
}else{
var ids=check.substring(1)
alert("删除"+ids);
}
}
})
//高亮显示
$(".gl td").click(function(){
//单击行的复选
var chkItem=$(this).parent().children("td").children(":checkbox[name='checkbox']");
//复选状态
var chkValue=chkItem.attr("checked");
//复选加相反状态
chkItem.attr("checked",!chkValue);
//颜色
var backgroundStyle=chkValue?"#F2F4F6":"#fc6";
$(this).parent().children("td").css("background-color",backgroundStyle);
});
$(".list_content :checkbox[name='checkbox']").click(function(){
//点击复选给相反checked
var chkValue=$(this).attr("checked");
$(this).attr("checked",!chkValue);
});
//all
$("#chkAll").click(function(){
var flag=$(this).attr("checked");
var backgroundStyle=flag?"#fc6":"#F2F4F6";
if(flag){
$(".list_content :checkbox").attr("checked",flag);
} else {
$(".list_content :checkbox").removeAttr("checked");
}
$(".gl td").css("background-color",backgroundStyle);
});
})