js五道经典练习题--第五道成绩列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
table {
width: 500px;
margin: 0 auto;
border: 1px solid #ddd;
border-collapse: collapse;
text-align: center;
}
td {
height: 40px;
border: 1px solid #eee;
}
input {
width: 100px;
padding: 6px 8px;
border: 1px solid #ddd;
outline: none;
border-radius: 4px;
display: none;
}
a {
text-decoration: none;
color: #333;
}
.cancel {
display: none;
}
.comfire {
display: none;
}
.btn {
padding: 6px 8px;
outline: none;
background: #8A2BE2;
color: #fff;
border: none;
}
</style>
</head>
<body>
<table id="table">
<tr>
<td>ID</td>
<td>姓名</td>
<td>成绩</td>
<td>操作</td>
</tr>
<tr>
<td>
<span>1</span>
<input type="text" />
</td>
<td>
<span>咖啡</span>
<input type="text" />
</td>
<td>
<span>90</span>
<input type="text" />
</td>
<td>
<a href="javascript:;" class="change">修改</a>
<a href="javascript:;" class="cancel">取消</a>
<a href="javascript:;" class="comfire">确定</a>
</td>
</tr>
<tr>
<td>
<span>2</span>
<input type="text" />
</td>
<td>
<span>绿茶</span>
<input type="text" />
</td>
<td>
<span>90</span>
<input type="text" />
</td>
<td>
<a href="javascript:;" class="change">修改</a>
<a href="javascript:;" class="cancel">取消</a>
<a href="javascript:;" class="comfire">确定</a>
</td>
</tr>
<tr>
<td>
<span>3</span>
<input type="text" />
</td>
<td>
<span>奶茶</span>
<input type="text" />
</td>
<td>
<span>90</span>
<input type="text" />
</td>
<td>
<a href="javascript:;" class="change">修改</a>
<a href="javascript:;" class="cancel">取消</a>
<a href="javascript:;" class="comfire">确定</a>
</td>
</tr>
<tr>
<td>
<span>4</span>
<input type="text" />
</td>
<td>
<span>红茶</span>
<input type="text" />
</td>
<td>
<span>90</span>
<input type="text" />
</td>
<td>
<a href="javascript:;" class="change">修改</a>
<a href="javascript:;" class="cancel">取消</a>
<a href="javascript:;" class="comfire">确定</a>
</td>
</tr>
</table>
<button id="btn" class="btn">ID从大到小排序</button>
<script>
var table = document.getElementById("table")
var oTr = table.getElementsByTagName("tr")
var oBtn = document.getElementById("btn")
var arr = []
var onOff = true
for(var i = 1; i < oTr.length; i++) {
tab(i)
arr.push(oTr[i])
}
// console.log(arr[0].getElementsByTagName("td")[0].innerText)
oBtn.onclick = function() {
if(onOff) {
for(var i = 0; i < arr.length; i++) {
for(var j = i + 1; j < arr.length; j++) {
if(parseFloat(arr[i].getElementsByTagName("td")[0].innerText) <= parseFloat(arr[j].getElementsByTagName("td")[0].innerText)) {
var temp = arr[i]
arr[i] = arr[j]
arr[j] = temp
}
}
}
onOff = false
} else {
for(var i = 0; i < arr.length; i++) {
for(var j = i + 1; j < arr.length; j++) {
if(parseFloat(arr[i].getElementsByTagName("td")[0].innerText) >= parseFloat(arr[j].getElementsByTagName("td")[0].innerText)) {
var temp = arr[i]
arr[i] = arr[j]
arr[j] = temp
}
}
}
onOff = true
}
// console.log(arr)
for(var i = 0; i < arr.length; i++) {
table.appendChild(arr[i])
}
}
function tab(a) {
var oInput = oTr[a].getElementsByTagName("input")
var oSpan = oTr[a].getElementsByTagName("span")
var oA = oTr[a].getElementsByTagName("a")
oA[0].onclick = function() {
for(var i = 0; i < oSpan.length; i++) {
oSpan[i].style.display = "none"
oInput[i].style.display = "inline-block"
oInput[i].value = oSpan[i].innerHTML
}
this.style.display = "none"
oA[1].style.display = "inline-block"
oA[2].style.display = "inline-block"
}
oA[1].onclick = function() {
for(var i = 0; i < oInput.length; i++) {
oInput[i].style.display = "none"
oSpan[i].style.display = "inline-block"
}
this.style.display = "none"
oA[2].style.display = "none"
oA[0].style.display = "inline-block"
}
oA[2].onclick = function() {
for(var i = 0; i < oSpan.length; i++) {
oSpan[i].style.display = "inline-block"
oInput[i].style.display = "none"
oSpan[i].innerHTML = oInput[i].value
}
this.style.display = "none"
oA[0].style.display = "inline-block"
oA[1].style.display = "none"
}
}
</script>
</body>
</html>
js五道经典练习题--第五道成绩列表的更多相关文章
- js五道经典练习题--第四道qq好友列表
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- js五道经典练习题--第三道实现购物车功能
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- js五道经典练习题--第二道仿qq聊天框
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- js五道经典练习题--第一道
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- MYSQL经典练习题，熟悉DQL
MYSQL经典练习题 (本练习题可让你熟悉DQL,快速的上手DQL) 首先,先在数据库中建立基本数据库以及表项: DROP DATABASE IF EXISTS `test`; CREATE DATA ...
- Python经典练习题1：一个整数，它加上100后是一个完全平方数，再加上168又是一个完全平方数，请问该数是多少？
Python经典练习题 网上能够搜得到的答案为: for i in range(1,85): if 168 % i == 0: j = 168 / i; if i > j and (i + j) ...
- 【视频+图文】Java基础经典练习题（一）输出2-100之间的素数，及素数个数
目录 第一题:判断2-100之间有多少个素数,并输出所有素数. 1.视频讲解: 2.思路分析: 代码讲解:以i=4为例 4.为大家准备了彩蛋: 能解决题目的代码并不是一次就可以写好的 我们需要根据我们 ...
- Python练习题 011：成绩打分
[Python练习题 011] 利用条件运算符的嵌套来完成此题:学习成绩>=90分的同学用A表示,60-89分之间的用B表示,60分以下的用C表示. ---------------------- ...
- 170106、用9种办法解决 JS 闭包经典面试题之 for 循环取 i
闭包 1.正确的说,应该是指一个闭包域,每当声明了一个函数,它就产生了一个闭包域(可以解释为每个函数都有自己的函数栈),每个闭包域(Function 对象)都有一个 function scope(不是 ...
随机推荐
- node和npm的安装和镜像源的修改
在node官网下载https://nodejs.org/en/ 直接下载msi的文件,需要配置环境变量 我的电脑-->属性-->高级系统配置-->环境变量-->用户变量,在用户 ...
- mysql 5.7 配置
MySQL安装文件分为两种,一种是msi格式的,一种是zip格式的.如果是msi格式的可以直接点击安装. zip格式是自己解压,解压缩之后其实MySQL,配置完就可以使用了. 1,配置环境变量很简单: ...
- 面向对象开发C++快速入门视频教程 C++基础加实战视频教程
课程目录: ├<C++面向对象高级开发(上)> │ ├1.C++编程简介.mp4 │ ├2.头文件与类的声明.mp4 │ ├3.构造函数.mp4 │ ├4.参数传递与返回值.mp4 │ ├ ...
- mongo 副本集
副本集配置文件 dbpath=/hwdata/mongodb/datalogpath=/hwdata/mongodb/logs/master.logpidfilepath=/hwdata/mongod ...
- jeecg开源项目的IDEA的部署
JEECG采用了SpringMVC + Hibernate + Minidao(类Mybatis) + Easyui(UI库)+ Jquery + Boostrap + Ehcache + Redis ...
- texmaker报错：could not start command 解决
我当时文件命名加了邮箱,引入特殊字符@,然后就报错了
- R语言-地图
1.maps包的map()函数 >map('world', fill = TRUE,col=heat.colors(10)) #世界地图 >map("state", i ...
- react mobx 装饰器语法配置
1.弹出项目配置 npm run eject 此处注意,若弹出项目配置失败,请先执行以下两行代码(我的项目执行上一句都会报错,所以都会执行) 1.git add . 2.git commit -m & ...
- 十、Strategy 策略模式
需求:使用不同的算法解决相同的问题 设计原理: 代码清单: 接口 Strategy public interface Strategy { public abstract Hand nextHand( ...
- Appium 学习二：切换Webview
由于测试的APP是混合应用,即包含了原生代码和web网页. 混合应用在应用程序中嵌入了Webview,Webview是用来访问网页的一个控件.Webview内核也分为原生和第三方(比如腾讯X5内核) ...