首先页面
<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); }); })