<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
??#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;
??}
</style>
</head>
<body>
<div id="box">
??<ul>
????<li class="current">1</li>
????<li>2</li>
????<li>3</li>
??</ul>
??<ol>
????<li class="current">1</li>
????<li >2</li>
????<li >3</li>
??</ol>
</div>
</body>
</html>
<script>
? // 獲取ul中的所有的li
? // 獲取ol中的所有的li
? var ulis = document.querySelectorAll('ul>li');
? var olis = document.querySelectorAll('ol>li');
? // 給ulis中的li綁定點(diǎn)擊事件
? for(var i = 0; i<ulis.length;i++){
? ? // 將li在ul中的下標(biāo)存儲(chǔ)到li標(biāo)簽中
? ? ulis[i].setAttribute('index',i);
? ? ulis[i].onclick = function(){
? ? ? // 拿到所有的ul中的li，清除類樣式
? ? ? for(var i = 0; i<ulis.length;i++){
? ? ? ? ulis[i].className = '';
? ? ? }
? ? ? // this表示觸發(fā)點(diǎn)擊事件的元素 li
? ? ? this.className = 'current';
? ? ? // 拿到所有ol中的li,清除樣式
? ? ? for(var i = 0; i<olis.length;i++){
? ? ? ? olis[i].className = '';
? ? ? }
? ? ? // 拿到點(diǎn)擊的這個(gè)li的索引
? ? ? var j = this.getAttribute('index');
? ? ? olis[j].className = 'current';
? ? }
? }
</script>
<!DOCTYPE html>
<html lang="en">
<head>
? <meta charset="UTF-8">
? <title>Leon</title>
</head>
<body>
? <table>
? ? <thead>
? ? ? <th>序號(hào)</th>
? ? ? <th>姓名</th>
? ? ? <th>年齡</th>
? ? ? <th>性別</th>
? ? ? <th>操作</th>
? ? </thead>
? ? <tbody></tbody>
? </table>
</body>
</html>
<script>
? 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()
? // 根據(jù)數(shù)組的數(shù)據(jù)動(dòng)態(tài)渲染表格函數(shù)
? function bindHtml(){
? ? // 獲取tbody標(biāo)簽
? ? var tbody = document.getElementsByTagName('tbody')[0];
? ? // 定義一個(gè)str變量用來(lái)接收我們拼接的表格tr-td字符串
? ? var str = '';
? ? // 遍歷數(shù)組，拿到數(shù)組中的數(shù)據(jù)，拼接到表格字符串中
? ? for (var i = 0; i < arr.length; i++) {? ? ? ?
? ? ? str += '<tr>';
? ? ? str += '<td>';
? ? ? str += (i+1);
? ? ? str += '</td>';
? ? ? // 遍歷數(shù)組中的元素對(duì)象西饵，拿到對(duì)象中的數(shù)據(jù)，然后拼接在下方的td中
? ? ? for (var key in arr[i]) {
? ? ? ? // 遍歷數(shù)組中的對(duì)象arr[i] 通過(guò)arr[i][key] 拿到數(shù)據(jù)姓名 年齡 性別的數(shù)據(jù)
? ? ? ? str += '<td>';
? ? ? ? str += arr[i][key];
? ? ? ? str += '</td>';
? ? ? }
? ? ? // 在刪除的td標(biāo)簽上添加一個(gè)del類名瞻凤，便于刪除的時(shí)候獲取到這個(gè)標(biāo)簽
? ? ? // 在刪除的td標(biāo)簽上添加一個(gè)自定義屬性index肥隆，將這條數(shù)據(jù)在數(shù)組中的索引作為屬性值存起來(lái)
? ? ? str += '<td class="del" index= '+i+'>';
? ? ? str += '刪除';
? ? ? str += '</td>';
? ? ? str += '</tr>';? ? ?
? ? }
? ? // 將拼接好的表格字符轉(zhuǎn)tr-td放到tbody中
? ? tbody.innerHTML = str;
? ? // 調(diào)用 刪除函數(shù)
? ? del()
? }
? // 點(diǎn)擊參數(shù)數(shù)組中的數(shù)據(jù)站绪，并渲染頁(yè)面
? function del(){
? ? // 獲取所有的刪除td標(biāo)簽,通過(guò)del的類名獲取
? ? var dels = document.getElementsByClassName('del');
? ? // 遍歷獲取到的所有刪除td的偽數(shù)組蔓肯，給每一個(gè)刪除td綁定一個(gè)點(diǎn)擊事件
? ? for (var i = 0; i < dels.length; i++) {
? ? ? dels[i].onclick = function(){
? ? ? ? // console.log(this);
? ? ? ? // 事件函數(shù)中的this遂鹊，指向觸發(fā)這個(gè)事件的元素
? ? ? ? // 通過(guò)點(diǎn)擊刪除 刪除數(shù)組中數(shù)據(jù)
? ? ? ? // 根據(jù)刪除td的index屬性拿到 這條數(shù)據(jù)的索引下邊? getAttribute()
? ? ? ? var index = this.getAttribute('index');
? ? ? ? // 根據(jù)拿到的索引刪除數(shù)組中數(shù)據(jù)，splice()
? ? ? ? arr.splice(index,1);
? ? ? ? // 調(diào)用 渲染表格的函數(shù)
? ? ? ? bindHtml();
? ? ? }
? ? }
? }
</script>
