function searchFunction() {
let tabel, filter, input, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
tabel = document.getElementById("myTable");
tr = document.getElementsByTagName("tr");
for (i = 1; i < tr.length; i++) {
if (tr[i].textContent.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}.search_input {
background-image: url(search_icon.png);
background-position: 3px 9px;
background-repeat: no-repeat;
background-size: 12px 12px;
width: 15%;
height: 31px;
padding: 12px 8px 9px 26px;
border: 1px solid #ddd;
margin: 12px 0 12px 0;
border-radius: 7px;
}
.my_tabel {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 13px;
}
.my_tabel th, .my_tabel td {
text-align: left;
padding: 12px;
}
.my_tabeltr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
table, .line{
border: 1px solid;
}
thead
{
background-color: #93B6D2;
}<!DOCTYPE html>
<html>
<head>
<title>Assingment 3</title>
<link rel="stylesheet" href="js-assingment.css" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="js_module.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form name="searching_tabel" id="searching_tabel">
<div class="container">
<span>Search</span>
<input type="text" id="myInput" onkeyup="searchFunction()" class="search_input">
<table class="table table-bordered my_tabel" id="myTable">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Date</th>
<th>Courses</th>
<th>UserGuid</th>
<th>License</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark Scheid</td>
<td>mscgei@wgu.edu</td>
<td>06-jan-15</td>
<td>PK0-003-Project+</td>
<td>03ocb</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Kenneth Nagle</td>
<td>knagle@wgu.edu</td>
<td>06-jan-15</td>
<td>N10-005 CompTIA Network+</td>
<td>02Oki</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Kenneth</td>
<td>matt.bearce@verizonwireless.com</td>
<td>06-jan-15</td>
<td>Pearson-220-802-complete-Pearson CompTIA: A+ 220-802(Course & Lab)</td>
<td>030c8</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Rafael Moreno</td>
<td>rmoren4@wgu.edu</td>
<td>06-jan-15</td>
<td>N10-005 CompTIA Network+</td>
<td>030c7</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Paul Doyle</td>
<td>doylepaul@gmail.com</td>
<td>06-jan-15</td>
<td>Pearson-220-802-complete-Pearson CompTIA: A+ 220-801(Course & Lab)</td>
<td>030c6</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Paul Doyle</td>
<td>esmally@gmail.com</td>
<td>06-jan-15</td>
<td>Pearson-220-802-complete-Pearson CompTIA: A+ 220-801(Course & Lab)</td>
<td>030bb</td>
<td>Course</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html> 我使用 html 和 bootstrap 创建了一个包含一些数据的表，并使用纯 java 脚本创建了一个在输入类型中过滤/搜索的功能，现在我需要对数据进行从升序到降序的排序，反之亦然。
最佳答案
您只需执行 (arrayName).sort(); 它会自动为您从小到大排序数字和字母(从 A-Z 和 1-(最大数字))，您可以还可以使用:
(arrayName).sort(function(a, b){
return b - a;
});
从大到小排序 这是有关 .sort 函数的文档:https://www.w3schools.com/jsref/jsref_sort.asp 希望对您有所帮助!
关于javascript - 如何在表中创建升序到降序排序？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45261536/