#box{
border:5px solid #999;
width:600px;
margin:0 auto;
height:350px;
overflow:hidden;
}
ul,ol{
list-style:none;
padding:0;
margin:0;
}
ul{
display:flex;
background:pink;
}
ul li{
width:200px;
height:50px;
line-height:50px;
font-size:30px;
font-weight:bold;
text-align:center;
background:pink;
}
ul li.current{
background:#ff0;
}
ol li{
height:300px;
text-align:center;
font-size:200px;
background:#0f0;
color:#fff;
line-height:300px;
font-weight:bold;
display:none;
}
ol li.current{
display:block;
}
- 1
- 2
- 3
- 1
- 2
- 3
// 获取ul中的所有的li
// 获取ol中的所有的li
var ulis = document.querySelectorAll('ul>li');
var olis = document.querySelectorAll('ol>li');
// 给ulis中的li绑定点击事件
for(var i = 0; i // 将li在ul中的下标存储到li标签中 ulis[i].setAttribute('index',i); ulis[i].onclick = function(){ // 拿到所有的ul中的li,清除类样式 for(var i = 0; i ulis[i].className = ''; } // this表示触发点击事件的元素 li this.className = 'current'; // 拿到所有ol中的li,清除样式 for(var i = 0; i olis[i].className = ''; } // 拿到点击的这个li的索引 var j = this.getAttribute('index'); olis[j].className = 'current'; } }
序号 | 姓名 | 年龄 | 性别 | 操作 |
---|
var arr = [
{name: 'Jack',age: 18,gender: '男'},
{name: 'Rose',age: 20,gender: '女'},
{name: 'Top',age: 22,gender: '男'},
{name: 'leon',age: 32,gender: '男'},
{name: 'lisi',age: 31,gender: '女'}
];
bindHtml()
// 根据数组的数据动态渲染表格函数
function bindHtml(){
// 获取tbody标签
var tbody = document.getElementsByTagName('tbody')[0];
// 定义一个str变量用来接收我们拼接的表格tr-td字符串
var str = '';
// 遍历数组,拿到数组中的数据,拼接到表格字符串中
for (var i = 0; i < arr.length; i++) {
str += '
str += '
str += (i+1);
str += '
// 遍历数组中的元素对象,拿到对象中的数据,然后拼接在下方的td中
for (var key in arr[i]) {
// 遍历数组中的对象arr[i] 通过arr[i][key] 拿到数据姓名 年龄 性别的数据
str += '
str += arr[i][key];
str += '
}
// 在删除的td标签上添加一个del类名,便于删除的时候获取到这个标签
// 在删除的td标签上添加一个自定义属性index,将这条数据在数组中的索引作为属性值存起来
str += '
str += '删除';
str += '
str += '
}
// 将拼接好的表格字符转tr-td放到tbody中
tbody.innerHTML = str;
// 调用 删除函数
del()
}
// 点击参数数组中的数据,并渲染页面
function del(){
// 获取所有的删除td标签,通过del的类名获取
var dels = document.getElementsByClassName('del');
// 遍历获取到的所有删除td的伪数组,给每一个删除td绑定一个点击事件
for (var i = 0; i < dels.length; i++) {
dels[i].onclick = function(){
// console.log(this);
// 事件函数中的this,指向触发这个事件的元素
// 通过点击删除 删除数组中数据
// 根据删除td的index属性拿到 这条数据的索引下边 getAttribute()
var index = this.getAttribute('index');
// 根据拿到的索引删除数组中数据,splice()
arr.splice(index,1);
// 调用 渲染表格的函数
bindHtml();
}
}
}