学习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>