87,922
社区成员
发帖
与我相关
我的任务
分享
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>demo layout</title>
<style type="text/css">
/*=reset*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strike, strong, sub, sup, tt, var, i, dl, dt, dd, ol, ul, li, form, fieldset, label, legend, table, caption, tbody, thead, tfoot, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, header, footer, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-style: normal; font-weight: 100; vertical-align: baseline; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-size: 1em; }
table { border-collapse: collapse; border-spacing: 0; }
input, select, textarea, button { font-family: inherit; font-size: 1em; }
abbr, acronym { font-variant: normal; }
code, kbd, pre, samp { font-family: "courier new", courier, monospace; }
/*=html5*/
article, aside, details, figcaption, figure, header, footer, hgroup, menu, nav, section { display: block; }
/*=view*/
body { color: #888; font: normal 100 normal 62.5%/1.6 sans-serif; background: #fff; }
/*=layout*/
.smod { margin:0 auto; width:80%; font-size:1.4em; }
.smod_h,
.smod_f{ position:fixed;left:10%; right:10%; background:#fafafa; }
.smod_h{ top:0; border-bottom:1px solid #ccc; }
.smod_f{ bottom:0; height:30px; line-height:30px; border-top:1px solid #ccc; }
.smod_d{ padding:66px 0 40px; }
.smod_h h3,
.smod_f label{ padding:0 0 0 10px; }
.smod a { text-decoration: none; color: #00c; }
/****************/
.sdata_list1 { width: 100%; }
.sdata_list1 input { vertical-align: middle; }
.sdata_list1 th,
.sdata_list1 td { padding: 4px; border-bottom: 1px solid #eee; }
.sdata_list1 thead th { width: 30px; text-align: center; color: #222; border: 0; }
.sdata_list1 thead th+th { width: auto; text-align: left; }
.sdata_list1 thead th+th+th { width: 100px; text-align: right; }
.sdata_list1 thead th+th+th+th { width: 60px; text-align: center; }
.sdata_list1 tbody td { width: 30px; text-align: center; }
.sdata_list1 tbody td+td { width: auto; text-align: left; color: #222; }
.sdata_list1 tbody td+td+td { width: 100px; text-align: right; color: #f60; }
.sdata_list1 tbody td+td+td+td { width: 60px; text-align: center; color: #888; }
.sdata_list1 tbody tr:hover th,
.sdata_list1 tbody tr:hover td { color: #222; background: #fafafa; border-color: #ccc; }
.sdata_list1 tbody tr.rowcur td{ background:#ffe; color:#222; }
/****************/
#msg { padding:8px 10px 2px; color: #00c; font-size:18px; }
</style>
</head>
<body>
<div class="swrapper">
<div class="smod">
<div class="smod_h">
<h3 id="msg">编辑状态</h3>
<table class="sdata_list1" id="datafilter">
<thead>
<tr>
<th><input type="checkbox" id="selall"></th>
<th>菜品</th>
<th>价格/元</th>
<th>状态</th>
<th></th>
</tr>
</thead>
</table>
</div>
<div class="smod_d" id="smodd">
<table class="sdata_list1" id="tablea">
<tbody>
<tr>
<td><input type="checkbox" name="cek"></td>
<td>特别推荐书籍:1</td>
<td>1.00</td>
<td><a class="shope" href="#">热卖中</a></td>
<td><a class="rowdel" href="#">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cek"></td>
<td>特别推荐书籍:2</td>
<td>2.00</td>
<td><a class="shope" href="#">热卖中</a></td>
<td><a class="rowdel" href="#">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cek"></td>
<td>特别推荐书籍:3</td>
<td>3.00</td>
<td><a class="shope" href="#">热卖中</a></td>
<td><a class="rowdel" href="#">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cek"></td>
<td>特别推荐书籍:4</td>
<td>4.00</td>
<td><a class="shope" href="#">热卖中</a></td>
<td><a class="rowdel" href="#">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cek"></td>
<td>特别推荐书籍:5</td>
<td>5.00</td>
<td><a class="shope" href="#">热卖中</a></td>
<td><a class="rowdel" href="#">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cek"></td>
<td>特别推荐书籍:6</td>
<td>6.00</td>
<td><a class="shope" href="#">热卖中</a></td>
<td><a class="rowdel" href="#">删除</a></td>
</tr>
</tbody>
</table>
</div>
<footer class="smod_f">
<p>
<label><input type="checkbox" id="selall2">全选</label>
<a href="#" id="dataadd">添加</a>
<a href="#" id="datadel">删除</a>
</p>
</footer>
</div>
</div>
<script type="text/javascript">
"use strict";
var config={
ITRNUM:true,
SELROW:"cek",
DELROW:"rowdel",
SAVEROW:"rsave",
CLSROWCUR:"rowcur"
};
var phDom={
gId:function(id){
if(!document.getElementById) return false;
if(!document.getElementById(id)) return false;
return document.getElementById(id);
}
};
var phTable={
filterTr:function(cek,sela,selb){
var ceks=document.getElementsByName(cek),ema=phDom.gId(sela),emb=phDom.gId(selb),len=ceks.length,i=0,j=0,cur=null;
var msg=phDom.gId("msg");
for(i=0;i<len;i++){
cur=ceks[i];
if(cur.checked){
j++;
if(j==len){
ema.checked=true;
emb.checked=true;
}else{
ema.checked=false;
emb.checked=false;
}
}
}
if(len==0){
ema.checked=false;
emb.checked=false;
}
msg.innerHTML="length: "+len+" j: "+j;
},
forTrAll:function(cek){
var ceks=document.getElementsByName(cek),len=ceks.length,i=0,cur=null;
var msg=phDom.gId("msg");
for(i=0;i<len;i++){
cur=ceks[i];
cur.checked=true;
}
msg.innerHTML="length: "+len;
},
forTrAllNo:function(cek){
var ceks=document.getElementsByName(cek),len=ceks.length,i=0,cur=null;
var msg=phDom.gId("msg");
for(i=0;i<len;i++){
cur=ceks[i];
cur.checked=false;
}
msg.innerHTML="length: "+len;
},
delTr:function(table,index){
table.deleteRow(index);
},
delMuiTr:function(link,cek,sela,selb){
var em=phDom.gId(link),ela=phDom.gId(sela),elb=phDom.gId(selb),ceks=document.getElementsByName(cek),i,cur=null,row,table,par=this;
var msg=phDom.gId("msg");
em.onclick=function(){
msg.innerHTML="";
for(i=(ceks.length-1);i>=0;i--){
msg.innerHTML="length: "+i+"; ";
if((ceks.length-1)==0){
ela.checked=false;
elb.checked=false;
}
cur=ceks[i];
if(cur.checked){
row=cur.parentNode.parentNode;
table=row.parentNode;
par.delTr(table,row.rowIndex);
}
}
};
},
selTr:function(id,cek,del,irow,sela,selb){
var em=phDom.gId(id),e,target,cell,row,table,input,par=this;
em.onclick=function(e){
e=e || window.event;
target=e.target || e.srcElement;
if(target.tagName.toLowerCase()=="td" || target.tagName.toLowerCase()=="th"){
cell=target;
row=cell.parentNode;
input=row.cells[0].getElementsByTagName("input")[0];
if(input!==null && input.type=="checkbox" && input.name==cek){
if(input.checked){
input.checked=false;
}else{
input.checked=true;
}
}
//Let IE9: row.className=config.CLSROWCUR;
row.classList.toggle(config.CLSROWCUR);
}
if(target.tagName.toLowerCase()=="a" && (target.className.indexOf(del)>-1)){
row=target.parentNode.parentNode;
table=row.parentNode;
par.delTr(table,row.rowIndex);
}
if(target.tagName.toLowerCase()=="a" && (target.className.indexOf(irow)>-1)){
target.innerHTML="删除";
target.className=config.DELROW;
config.ITRNUM=true;
}
par.filterTr(cek,sela,selb);
};
},
selTrAll:function(sela,selb,cek){
var ema=phDom.gId(sela);
var emb=phDom.gId(selb);
var par=this;
ema.onclick=function(){
if(this.checked){
emb.checked=true;
par.forTrAll(cek);
}else{
emb.checked=false;
par.forTrAllNo(cek);
}
};
emb.onclick=function(){
if(this.checked){
ema.checked=true;
par.forTrAll(cek);
}else{
ema.checked=false;
par.forTrAllNo(cek);
}
};
}
};
function addRow(table){
if(config.ITRNUM){
var em,row,cella,cellb,cellc,celld,celle;
em=phDom.gId(table);
row=em.insertRow(0);
cella=row.insertCell(0);
cellb=row.insertCell(1);
cellc=row.insertCell(2);
celld=row.insertCell(3);
celle=row.insertCell(4);
cella.innerHTML="<input type='checkbox' name='cek'>";
cellb.innerHTML="<input type='text' placeholder='产品描述'>";
cellc.innerHTML="<input type='text' placeholder='价格'>";
celld.innerHTML="<a class='shope' href='#'>热卖中</a>";
celle.innerHTML="<a class='rsave' id='drs' href='#'>保存</a>";
config.ITRNUM=false;
}else{
alert("请先保存新添加内容xxx");
}
}
phTable.selTr("tablea",config.SELROW,config.DELROW,config.SAVEROW,"selall","selall2");
phTable.selTrAll("selall","selall2",config.SELROW);
phTable.delMuiTr("datadel",config.SELROW,"selall","selall2");
var irow=phDom.gId("dataadd");
var addcel=phDom.gId("drs");
irow.onclick=function(){
addRow("tablea");
};
var csdnStr="csdn bbs";
</script>
</body>
</html>