这是本人看到taobao网上的功能,然后分析提取的:
复制内容到剪贴板
代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<META http-equiv="Cache-Control" content="no-cache">
<META http-equiv="Pragma" content="no-cache">
<title>选中的复选框后,TR变色</title>
</head>
<body>
<style type="text/css">
table {
width:98%;
padding:4px;
}
td {
border-bottom:1px solid #333;
}
</style>
<form method="post" id="orderListForm" action="" onsubmit="return clsOrderForm(true)">
<script>
function selectAllOrNotRecordMacro(objSelect,form){
if(objSelect==null || typeof(objSelect)=="undefined"){ //
var objSelect =new Object();
objSelect.checked=true;
}
var checks = form.elements("selectIds");
if(checks==null ||typeof(checks)=="undefined") { //无选
return;
}
if(typeof(checks.length)=="undefined"){ //单选
checks.checked = objSelect.checked;
if(!checks.disabled){
if (objSelect.checked != checks.checked) { checks.click(); }
}
}else{//多选
for(i = 0; i < checks.length; i++) {
if(!checks[i].disabled){
if(objSelect.checked != checks[i].checked) { checks[i].click(); }
}
}
}
}
function reverse(form){ //反选
var checks = form.elements("selectIds");
if(checks==null ||typeof(checks)=="undefined") {
return;
}
if(typeof(checks.length)=="undefined"){
checks.click();
}else{
for(i = 0; i < checks.length; i++) {
if(!checks[i].disabled){
checks[i].click();
}
}
}
}
function selectAll(form,isNotAll){//全选
var checks = form.elements("selectIds");
if(checks==null ||typeof(checks)=="undefined") {
return;
}
if(typeof(checks.length)=="undefined"){
if(checks.checked!=isNotAll){
checks.click();
}
}else{
for(i = 0; i < checks.length; i++) {
if(!checks[i].disabled){
if(checks[i].checked!=isNotAll){
checks[i].click();
}
}
}
}
macroWriteSel(!isNotAll);
}
function macroWriteSel(isNotAll){ //在列表的下方写全选反选按钮
var macroSel=document.getElementById("macroSel");
if(macroSel!=null && typeof(macroSel)!="undefined"){
var selAll="<input type=\"button\" value=\"全选\" onclick=\"selectAll(orderListForm,true)\" />";
var notSelAll="<input type=\"button\" value=\"全不选\" onclick=\"selectAll(orderListForm,false)\" />";
if(isNotAll){
macroSel.innerHTML=selAll;
}else{
macroSel.innerHTML=notSelAll;
}
macroSel.innerHTML=macroSel.innerHTML+' '+"<input type=\"button\" value=\"反选\" onclick=\"reverse(orderListForm)\" />";
}
}
function changeBGColor(id){//当选中一列后,isChangeColorForMouse设成n,下次鼠标放上就不变色
if(document.getElementById(id).checked){
document.getElementById(id+"isChangeColorForMouse").value='n';
document.getElementById(id+"tr").bgColor='#FFFCE1';
}else{
document.getElementById(id+"isChangeColorForMouse").value='y';
document.getElementById(id+"tr").bgColor='';
}
}
function mouseOn(id,current){
var isChange=document.getElementById(id+"isChangeColorForMouse").value;
if(isChange=="y")
current.bgColor='#F0F0F0';
}
function mouseOut(id,current){
var isChange=document.getElementById(id+"isChangeColorForMouse").value;
if(isChange=="y")
current.bgColor='';
}
</script>
<table border="0" align="center" cellspacing="0" class="list" name="orderTable">
<tr>
<th width="40">选择</th>
<th width="90">交易时间</th>
<th width="110">买家</th>
<th>名称</th>
</tr>
<input type="hidden" id="001isChangeColorForMouse" value="y">
<tr id="001tr" onMouseOver="mouseOn('001',this)" onMouseOut="mouseOut('001',this)">
<td><input name="selectIds" id="001" type="checkbox" value="001" onclick="changeBGColor('001')" /></td>
<td>2007-11-20</td>
<td>oklrc</td>
<td>项目1</td>
</tr>
<input type="hidden" id="002isChangeColorForMouse" value="y">
<tr id="002tr" onMouseOver="mouseOn('002',this)" onMouseOut="mouseOut('002',this)">
<td><input name="selectIds" id="002" type="checkbox" value="002" onclick="changeBGColor('002')" /></td>
<td>2007-11-20</td>
<td>dooown.com</span></td>
<td>项目2</td>
</tr>
<input type="hidden" id="003isChangeColorForMouse" value="y">
<tr id="003tr" onMouseOver="mouseOn('003',this)" onMouseOut="mouseOut('003',this)">
<td><input name="selectIds" id="003" type="checkbox" value="003" onclick="changeBGColor('003')" /></td>
<td>2007-11-19</td>
<td>oklrc.com</td>
<td title="PowerShadow">PowerShadow影子系统2.8</td>
</tr>
</table>
<table cellspacing=0 cellpadding=0 border=0 width="100%">
<tr>
<td align="left" bgcolor="#f6f6f6"><span id="macroSel"></span></td>
<td align="right" bgcolor="#f6f6f6">共xx条记录</td>
</tr>
</table>
<script language="javascript">
// 下面这块代码是修复bug： “全选page1页，然后翻到page2，再翻回page1 出现的列表已全选，却继续出现“全选”按钮
var frm = document.getElementById("orderListForm");
var checks = frm.elements("selectIds");
var flag = true ;
if(checks==null ||typeof(checks)=="undefined") { //无选
flag = true ;
}
else if(typeof(checks.length)=="undefined"){//单选选中
if(checks.checked == true) {
flag = false;
}
}else{//多项全选
var j = 0;
for(i = 0; i < checks.length; i++) {
if(checks[i].checked == true)
j++;
}
if(j==checks.length){
flag = false;
}
}
macroWriteSel(flag);
</script>
</form>
</body>
</html>
