<!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;
}
}
}
</script>
时间： 2024-10-23 10:28:17