如何在表中创建排序升序为降序？

时间：2017-07-23 04:35:39

标签： javascript html5 css3 sorting

＆＃13;
＆＃13; 
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";
        }
    }
}
＆＃13; 
.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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

我使用html和bootstrap创建了一个包含一些数据的表，并且我使用纯java脚本在输入类型中创建了一个过滤/搜索功能，现在我需要对数据进行从升序到降序的排序，反之亦然。

2 个答案:

答案 0 :(得分：0)

您可以(arrayName).sort();自动对您进行从小到大的数字和字母排序（从A-Z和1-（最大数字）），您也可以使用：

(arrayName).sort(function(a, b){ 
    return b - a;
});

从最大到最小的排序 以下是.sort函数的文档：https://www.w3schools.com/jsref/jsref_sort.asp 希望它有所帮助！

答案 1 :(得分：0)

您需要做的是将数据存储在JavaScript数组中。然后，您可以迭代记录并在JS中动态排序。一旦你这样做，这只是清理和重新渲染你的桌子的问题：

 
var users = [
  {
    row: 1,
    name: 'B Mark Scheid',
    email: 'mscgei@wgu.edu',
    date: '06-jan-15',
    courses: 'PK0-003-Project+',
    guid: '03ocb',
    license: 'Course'
  },
  {
    row: 2,
    name: 'C Kenneth Nagle',
    email: 'knagle@wgu.edu',
    date: '06-jan-15',
    courses: 'N10-005 CompTIA Network+',
    guid: '02Oki',
    license: 'Course'
  },
  {
    row: 3,
    name: 'A enneth',
    email: 'matt.bearce@verizonwireless.com',
    date: '06-jan-15',
    courses: 'Pearson-220-802-complete-Pearson CompTIA: A+ 220-802(Course & Lab)',
    guid: '030c8',
    license: 'Course'
  }
]

function renderTable(){

  users.forEach(function(user, key){

    // You'll want to fill this out with all your `td`,
    // just doing the first column for demonstration purposes.
    var tr = "<tr><th scope=\"row\">"+user.row+"</th><td>"+user.name+"</td></tr>";

    $('#myTable tbody').append(tr);
  })
}

function clearTable(){
  // Clear the table body of all `tr`.
  $('#myTable tbody').empty();
}

function sortBy(param){
  // Bullt-in array sort.
  users = users.sort(function(a,b){
    // Handle sorting numbers.
    if(typeof a[param] == 'number') return a[param] - b[param];

    // Handle sorting strings.
    // `localeCompare() tells us whether or not `a` is before `b` in the alphabet.

    return a[param].localeCompare(b[param]);

  });
}

// We're gonna register click listeners on each of the headers,
// using the `class` names I add in the HTML below.
// This just says: for each of the keys that the first user has,
// mount a click handler.
Object.keys(users[0]).forEach(function(key){
  $('.header-' + key).click(function(){

    // Pretty self-explanatory.
    sortBy(key);
    clearTable();
    renderTable();

  });
});

// Start off with the table showing.
renderTable();


// Your search still works.

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";
        }
    }
}
<!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 class="header-row">#</th>
 
<!-- I am adding classes to the headers for click listeners. -->

					  <th class="header-name">Name</th>
					  <th class="header-email">Email</th>
					  <th>Date</th>
					  <th>Courses</th>
					  <th>UserGuid</th>
					  <th>License</th>
					</tr>
				  </thead>
				  <tbody>
					

<!-- NOTICE THE EMPTY TABLE HERE! WE WILL GENERATE THIS IN THE JS! -->



				  </tbody>
				</table>
			</div>	
		</form>
	</body>
</html>

我将降序作为你的任务。

相关问题
最新问题