javascript 表格增刪改查 排序不會（第一次寫部落格，求交流哈）
學習JS快1個月了，博主本人上的是培訓的，快考試了，補習下學過的
發下今晚寫的吧。。。
有大神看看我的這種程度，排序事件怎麼弄~~
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background: rgba(255,0,0,0.3);
}
.box{
width: 800px;
background: #99fb99;
margin: 100px auto;
padding: 20px 0 50px 20px;
}
.box p{
height: 30px;
}
.hid{
display: none;
}
#Otable {
border-collapse:collapse ;
width: 600px;
}
#Otable th,#Otable td{
border: 1px #000 solid;
height: 30px;
text-align: center;
}
#Otable td a{
cursor: pointer;
}
#Otable td a:hover{
color: red;
}
#colorno{
display: none;
}
</style>
</head>
<body>
<div class="box">
<p>姓名：<input type="text" id="txt1" value="" placeholder="姓名"/></p>
<p>年齡：<input type="text" id="txt2" value="" placeholder="年齡"/></p>
<p><button id="add">新增</button><button id="okgai" class="hid">確認修改</button><button id="color">引入變色開關</button><button id="colorno">關閉變色開關</button></p>
<p><button id="age">按照年齡排序</button></p>
<p><input type="text" id="cha" value="" placeholder="請輸入查詢的姓名"/><button id="soubtn">搜尋</button></p>
<table id="Otable">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年齡</th>
<th>操作</th>
</tr>
</thead>
</table>
</div>
</body>
<script type="text/javascript">
//獲取元素
var txt1=document.getElementById("txt1");
var txt2=document.getElementById("txt2");
var btnAdd=document.getElementById("add");
var btnColor=document.getElementById("color");
var btnColorno=document.getElementById("colorno");
var btnAge=document.getElementById("age");
var txt3=document.getElementById("cha");
var btnCha=document.getElementById("soubtn");
var Otable=document.getElementById("Otable");
var trs=document.getElementsByTagName("tr");
var btnOkgai=document.getElementById("okgai");
//新增按鈕事件
btnAdd.onclick=function(){
var tr=document.createElement("tr");
Otable.appendChild(tr)
//第1個=ID
var td=document.createElement("td");
tr.appendChild(td);
td.innerHTML=trs.length-1;
//第2個=姓名
td=document.createElement("td");
tr.appendChild(td);
td.innerHTML=txt1.value;
//第3個=年齡
td=document.createElement("td");
tr.appendChild(td);
td.innerHTML=txt2.value;
//第4個=操作
td=document.createElement("td");
tr.appendChild(td);
td.innerHTML='<a onclick="del(this)">刪除</a> <a onclick="gai(this)">修改</a>';
//清空文字內容
txt1.value="";
txt2.value="";
}
//滑動變色按鈕事件
btnColor.onclick=function(){
//新增隱藏，關閉按鈕出現
btnColor.style.display="none";
btnColorno.style.display="inline-block";
for (var i = 1; i < trs.length; i++) {
//滑鼠移入
trs[i].onmouseover=function(){
this.style.background="rgba(255,0,0,0.3)"
}
//滑鼠移出
trs[i].onmouseout=function(){
this.style.background=""
}
}
}
//關閉滑動變色按鈕事件
btnColorno.onclick=function(){
//新增隱藏，關閉按鈕出現
btnColor.style.display="inline-block";
btnColorno.style.display="none";
for (var i = 1; i < trs.length; i++) {
//滑鼠移入
trs[i].onmouseover=function(){
this.style.background=""
}
//滑鼠移出
trs[i].onmouseout=function(){
this.style.background=""
}
}
}
//刪除事件
function del(obj){
obj.parentNode.parentNode.remove();
}
//修改點選事件
var Oindex;
function gai(sky){
//確認修改按鈕顯露
btnOkgai.style.display="inline-block";
//資料回顯
txt1.value=(sky.parentNode.parentNode).childNodes[1].innerHTML;
txt2.value=(sky.parentNode.parentNode).childNodes[2].innerHTML;
Oindex=(sky.parentNode.parentNode).childNodes[0].innerHTML;
}
//確認修改事件
btnOkgai.onclick=function(){
//隱藏確認修改按鈕
btnOkgai.style.display="none";
//內容替換
var i=Number(Oindex);
trs[i].childNodes[1].innerHTML=txt1.value;
trs[i].childNodes[2].innerHTML=txt2.value;
txt1.value=""
txt2.value=""
}
//姓名查詢 然後改變行背景顏色
btnCha.onclick=function(){
//每次點選清除之前的查詢
for (var i = 0; i < trs.length; i++) {
trs[i].style.background="";
}
for (var i = 1; i < trs.length; i++) {
if (trs[i].childNodes[1].innerHTML==txt3.value) {
trs[i].style.background="red";
}
}
}
//年齡排序按鈕事件
btnAge.onclick=function(){
}
</script>
</html>