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(不是 ...
随机推荐
- how find out what is causing Visual Studio to think each project is out of date
You can find out what is causing Visual Studio to think each project is out of date, and then addres ...
- java Integer类以及拆箱和装箱
package com.ilaw.boson.controller; public class Demo { public static void main(String[] args) { Inte ...
- leetcode53
public class Solution { public int MaxSubArray(int[] nums) { int max = int.MinValue; ; ; i < nums ...
- leetcode236
class Solution { public: TreeNode* lowestCommonAncestor(TreeNode* root, TreeNode* p, TreeNode* q) { ...
- Halcon示例：print_quality 字符验证
read_image (Image, 'fonts/arial_a1')get_image_size (Image, Width, Height)dev_close_window ()dev_open ...
- cdnbest日志分析显示404的原因
日志分析报404原因 报这个提示一般是日志没有开启或还没有日志 检查下面几点: 开启和关闭站点日志在节点3311中显示如下图nolog是关闭 日志翻转目前默认是1个小时以后会默认改成20分钟,翻转时 ...
- 【python中二叉树的实现】python中二叉树的创建、三种方式递归遍历和非递归遍历
代码如下: # coding=utf-8 class myNode(object): def __init__(self, data=-1, lchild=None, rchild=None): se ...
- [leetcode]5. Longest Palindromic Substring最长回文子串
Given a string s, find the longest palindromic substring in s. You may assume that the maximum lengt ...
- Python下安装MySQLdb模块
----------------------[针对Windows下python 的MySQLdb模块安装]--------------------- 一.检查MySQLdb模块是否安装,可在DOS命令 ...
- tween 缓动动画
在讲tween类之前,不得不提的是贝塞尔曲线了.首先,贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线.它在作图工具或动画中中运用得比较多,例如PS中的钢笔工具,firework中的画笔等等 ...