javascript - js动态表格无效果？
本文介绍了javascript - js动态表格无效果？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
我想做个js动态表格（百度前端学院中的题目 ，http://ife.baidu.com/2016/tas...），现在的情况是这样的：第一次点击语文，数学，英文中任何一个上箭头都有效果，但是只能点击一次，比如，我点击了语文上箭头，页面确实正确按照语文成绩排序，然后我点击数学或者英文中的上箭头，没有反应，页面没有发生任何变化，不知道怎么解决？谢谢。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态表格</title>
<style>
*{font-size: 14px;}
tr th{background-color: #333333;color: #fff;}
table{border-collapse: collapse;}
table tr th{position: relative;border: 1px solid #d6d6d6;padding: 12px 35px;text-align: center;}
table tr td{border: 1px solid #d6d6d6;padding: 8px 35px;text-align: center;}
.up{width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;
border-bottom: 10px solid #fff;position: absolute;top: 7px;right: 12px;}
.down{
width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;
border-top: 10px solid #fff;position: absolute;top: 23px;right: 12px;}
</style>
</head>
<body>
<script>
window.onload = function(){
var table = document.createElement("table");
document.body.appendChild(table);
var score = [["张三",10,9,30],["李四",9,16,66],["王五",26,8,49]];
var newScore;
function createTable(args){
table.innerHTML = '';
var tr = document.createElement("tr");
var td = document.createElement("td");
var str = '';
var title;
var titleArray = ["姓名","语文","数学","英文","总分"];
var upDown = '<div class = "up"></div>' + '<div class = "down"></div>'
table.appendChild(tr);
tr.appendChild(td);
title = '<tr><th>' + titleArray[0] + '</th><th>' + titleArray[1] + upDown + '</th><th>' + titleArray[2] + upDown + '</th><th>' + titleArray[3] + upDown + '</th><th>' + titleArray[4] + upDown + '</th></tr>';
for (var i = 0; i < args.length; i++) {
str += '<tr><td>' + args[i][0] + '</td><td>'+ args[i][1] + '</td><td>' + args[i][2] + '</td><td>'+ args[i][3] + '</td><td>' + (args[i][1]+args[i][2]+args[i][3]) +'</td></tr>'
};
table.innerHTML = title + str;
};
createTable(score);
var compare = function(prop){
return function (arr1,arr2){
var x = arr1[prop];
var y = arr2[prop];
if(x < y){
return 1
}else if(x > y){
return -1
}else{
return 0
}
}
};
document.getElementsByTagName('table')[0].getElementsByTagName('tr')[0].getElementsByTagName('th')[1].getElementsByTagName('div')[0].onclick = function(){
newScore = score.sort(compare(1));
createTable(newScore);
console.log("语文分数从上到下");
};
document.getElementsByTagName('table')[0].getElementsByTagName('tr')[0].getElementsByTagName('th')[2].getElementsByTagName('div')[0].onclick = function(){
newScore = score.sort(compare(2));
createTable(newScore);
console.log("数学分数从上到下");
};
document.getElementsByTagName('table')[0].getElementsByTagName('tr')[0].getElementsByTagName('th')[3].getElementsByTagName('div')[0].onclick = function(){
newScore = score.sort(compare(3));
createTable(newScore);
console.log("英文分数从上到下");
}
}
</script>
</body>
</html>不知道大家有没有理解我的问题意思，我怕我说不清楚。
解决方案
第一次点击后调用createTable生成新的表格，你忘了绑定click事件
有效代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态表格</title>
<style>
* {
font-size: 14px;
}
tr th {
background-color: #333333;
color: #fff;
}
table {
border-collapse: collapse;
}
table tr th {
position: relative;
border: 1px solid #d6d6d6;
padding: 12px 35px;
text-align: center;
}
table tr td {
border: 1px solid #d6d6d6;
padding: 8px 35px;
text-align: center;
}
.up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid #fff;
position: absolute;
top: 7px;
right: 12px;
}
.down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid #fff;
position: absolute;
top: 23px;
right: 12px;
}
</style>
</head>
<body>
<script>
window.onload = function() {
var table = document.createElement("table");
document.body.appendChild(table);
var score = [
["张三", 10, 9, 30],
["李四", 9, 16, 66],
["王五", 26, 8, 49]
];
var newScore;
function createTable(args) {
table.innerHTML = '';
var tr = document.createElement("tr");
var td = document.createElement("td");
var str = '';
var title;
var titleArray = ["姓名", "语文", "数学", "英文", "总分"];
var upDown = '<div class = "up"></div>' + '<div class = "down"></div>'
table.appendChild(tr);
tr.appendChild(td);
title = '<tr><th>' + titleArray[0] + '</th><th>' + titleArray[1] + upDown + '</th><th>' + titleArray[2] + upDown + '</th><th>' + titleArray[3] + upDown + '</th><th>' + titleArray[4] + upDown + '</th></tr>';
for (var i = 0; i < args.length; i++) {
str += '<tr><td>' + args[i][0] + '</td><td>' + args[i][1] + '</td><td>' + args[i][2] + '</td><td>' + args[i][3] + '</td><td>' + (args[i][1] + args[i][2] + args[i][3]) + '</td></tr>'
};
table.innerHTML = title + str;
document.getElementsByTagName('table')[0].getElementsByTagName('tr')[0].getElementsByTagName('th')[1].getElementsByTagName('div')[0].onclick = function() {
newScore = score.sort(compare(1));
createTable(newScore);
console.log("语文分数从上到下");
};
document.getElementsByTagName('table')[0].getElementsByTagName('tr')[0].getElementsByTagName('th')[2].getElementsByTagName('div')[0].onclick = function() {
newScore = score.sort(compare(2));
createTable(newScore);
console.log("数学分数从上到下");
};
document.getElementsByTagName('table')[0].getElementsByTagName('tr')[0].getElementsByTagName('th')[3].getElementsByTagName('div')[0].onclick = function() {
newScore = score.sort(compare(3));
createTable(newScore);
console.log("英文分数从上到下");
}
};
createTable(score);
var compare = function(prop) {
return function(arr1, arr2) {
var x = arr1[prop];
var y = arr2[prop];
if (x < y) {
return 1
} else if (x > y) {
return -1
} else {
return 0
}
}
};
}
</script>
</body>
</html>
这篇关于javascript - js动态表格无效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
