<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> body { height:800px; } #title { height:20%; width:100%; /*background-color:green;*/ /*top:0px;*/ } #title1 { height:80%; background-color:green; } #title2 { height:20%; background-color:gray; text-align:center; } #left { width:20%; height:70%; float:left; background-color:yellow; } #main { width:80%; height:70%; float:right; background-color:#0094ff; } #titleol { list-style:none; float:right; /*绝对定位absolut，不随屏幕一起滚动，脱离文档流 固定定位 fixed，跟屏幕一起走始终在视野可见位置 脱离文档流 相对定位 relative，没有脱离文档流，不随屏幕动 static:静态,不会脱离文档流,无法使用top,left进行偏移 z-index调整层次数值越大越在上面 */ position:relative; top:70%; } .titleli { border:1px solid blue; width:30px; height:20px; float:left; color:white; text-align:center; font-size:larger; cursor:pointer; } #tableid01 { border:1px solid red; border-collapse:collapse; margin:0 auto; width:100%; } #tableid01 td { border:1px solid red; } </style> </head> <body> <div id="title"> <div id="title1"> <ol id="titleol"> <li class="titleli">1</li> <li class="titleli">2</li> <li class="titleli">3</li> <li class="titleli">4</li> </ol> </div> <div id="title2"></div> </div> <div id="left"></div> <div id="main"> <table id="tableid01"> <tr> <td><input type="checkbox" id="ckall"/></td> <td >姓名</td> <td>年龄</td> <td><a href="#" id="deleteall">全删</a></td> </tr> <tr> <td><input type="checkbox" class="ck01" /></td> <td class="updatetd">战鹰</td> <td>18</td> <td><a href="#" class="deletetr">删除</a></td> </tr> <tr> <td><input type="checkbox" class="ck01" /></td> <td class="updatetd">王丹</td> <td>19</td> <td><a href="#" class="deletetr">删除</a></td> </tr> </table> <input type="button" value="加行" id="btnAdd"/> <input type="button" value="修改" id="btnUpdate" /> </div> <div id="bottom"></div> </body> </html> <script type="text/javascript"> var liObjects = document.getElementsByClassName("titleli") var titleimg=document.getElementById("title1"); var news = document.getElementById("title2"); //对象数组，将需要的东西封装成对象，根据key来取到所在对象的属性值 var ObjectArray=[{"key":1,"imgpath":"url(/img/1.jpg)","news":"zzz"}, {"key":2,"imgpath":"url(/img/2.jpg)","news":"bbb"}, {"key":3,"imgpath":"url(/img/3.jpg)","news":"aaa"}, { "key": 4, "imgpath": "url(/img/4.jpg)", "news": "ccc" }] for (var i = 0; i < liObjects.length; i++) { liObjects[i].onclick = HeightLight; } //封装高亮方法 function HeightLight() { for (var j = 0; j < liObjects.length; j++) { liObjects[j].style.backgroundColor="black"; } this.style.backgroundColor="red"; titleimg.style.backgroundImage = GetbyKey(this.innerHTML.trim()).imgpath; news.innerHTML=GetbyKey(this.innerHTML.trim()).news; } //封装getbykey通过对象数组的key判断点击li得到对象 function GetbyKey(key) { for (var k = 0; k < ObjectArray.length; k++) { if(key==ObjectArray[k].key) {return ObjectArray[k];} } } //单击ck全选全反选 document.getElementById("ckall").onclick = function () { var ckobjects = document.getElementsByClassName("ck01"); for (var i = 0; i < ckobjects.length; i++) { ckobjects[i].checked = this.checked; } } //单删除 var DelObjects = document.getElementsByClassName("deletetr"); for (var i = 0; i <DelObjects.length; i++) { DelObjects[i].onclick = function () { var trobject = this.parentNode.parentNode; trobject.parentNode.removeChild(trobject); } } //多选删除 document.getElementById("deleteall").onclick = function () { var ckobjects = document.getElementsByClassName("ck01") //此处需要注意，数组元素删除，需要倒序删 for (var i = ckobjects.length-1; i >=0; i--) { if (ckobjects[i].checked == true) { var trobject= ckobjects[i].parentNode.parentNode; trobject.parentNode.removeChild(trobject); } } } //table加行 document.getElementById("btnAdd").onclick = function () { var tr = document.createElement("tr"); tr.innerHTML="<td><input type='checkbox' class='ck01' /></td> <td class='updatetd'></td> <td></td> <td><a href='#' class='deletetr'>删除</a></td>" document.getElementById("tableid01").appendChild(tr); for (var i = 0; i < DelObjects.length; i++) { DelObjects[i].onclick = function () { var trobject = this.parentNode.parentNode; trobject.parentNode.removeChild(trobject); } } } //修改 var tdobjects = document.getElementsByClassName("updatetd"); var selectedtd; for (var i = 0; i < tdobjects.length; i++) { tdobjects[i].onclick = function () { var inputtxt = document.createElement("input"); inputtxt.value = this.innerHTML; this.innerHTML = ""; this.appendChild(inputtxt); //得到焦点 inputtxt.focus(); selectedtd = this; //失去焦点事件 inputtxt.onblur = function () { selectedtd.innerHTML = ""; selectedtd.innerHTML = this.value; } } }
//调用li点击事件 自动切换
var liIndex=0;
function autoClick()
{
liObjects[liIndex].onclick();
liIndex++;
liIndex = liIndex > 3 ? 0 : liIndex;
}
setInterval(autoClick, 1000);
</script>