JS table排序
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>A</title>
<style>
body {
margin: 0;
} .container {
padding: 0;
width: 100%;
opacity: 0.8;
} div {
padding: 15px;
} .canvas {
margin: 0 auto;
min-height: 100px;
width: 1450px;
} .rise {
color: #19b34c;
} .drop {
color: red;
} .bottom {
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
text-align: center;
overflow-y: scroll;
overflow-x: hidden;
max-height: 400px;
} .datatable caption {
background: #B0C4DE;
color: #33517A;
padding: 0.4em 0 0.3em 0;
border: 1px solid #789AC6;
} tbody tr {
height: 40px;
} tbody tr:hover {
background-color: #bbb;
} .bottom-header table {
width: 100%;
border-collapse: collapse;
background-color: white;
border: 1px solid #bbb;
} .bottom table {
width: 100%;
border: 1px solid #000
} span {
cursor: pointer;
} .up {
color: green;
} .down {
color: red
} .item-list {
background-color: white;
} .row {
background-color: #eee;
}
</style>
</head>
<body>
<div class="container">
<div class="canvas">
<div class="bottom-header">
<table class="datatable">
<colgroup>
<col style="width: 120px;">
<col style="width: 80px;">
<col style="width: 80px;">
<col style="width: 80px;">
<col style="width: 80px;">
<col style="width: 80px;">
<col style="width: 80px;">
<col style="width: 80px;">
<col style="width: 80px;">
<col style="width: 80px;">
<col style="width: 90px;">
<col style="width: 90px;">
<col style="width: 90px;">
<col style="width: 90px;">
<col style="width: 90px;">
<col style="width: 90px;">
<col style="width: 80px;">
</colgroup>
<thead>
<tr>
<th>商品ASIN码</th>
<th>上周均价</th>
<th class="select-name">这周均价<span class="up" title="升序"><svg class="bi bi-file-arrow-up" width="1em"
height="1em" viewBox="0 0 16 16"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4 1h8a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V3a2 2 0 012-2zm0 1a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V3a1 1 0 00-1-1H4z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd"
d="M4.646 7.854a.5.5 0 00.708 0L8 5.207l2.646 2.647a.5.5 0 00.708-.708l-3-3a.5.5 0 00-.708 0l-3 3a.5.5 0 000 .708z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8 12a.5.5 0 00.5-.5v-6a.5.5 0 00-1 0v6a.5.5 0 00.5.5z"
clip-rule="evenodd"></path>
</svg></span><span class="down" title="降序"><svg class="bi bi-file-arrow-down" width="1em" height="1em"
viewBox="0 0 16 16" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4 1h8a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V3a2 2 0 012-2zm0 1a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V3a1 1 0 00-1-1H4z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd"
d="M4.646 8.146a.5.5 0 01.708 0L8 10.793l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8 4a.5.5 0 01.5.5v6a.5.5 0 01-1 0v-6A.5.5 0 018 4z"
clip-rule="evenodd"></path>
</svg></span></th>
<th class="select-name">趋势<span class="up" title="升序"><svg class="bi bi-file-arrow-up" width="1em"
height="1em" viewBox="0 0 16 16"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4 1h8a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V3a2 2 0 012-2zm0 1a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V3a1 1 0 00-1-1H4z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd"
d="M4.646 7.854a.5.5 0 00.708 0L8 5.207l2.646 2.647a.5.5 0 00.708-.708l-3-3a.5.5 0 00-.708 0l-3 3a.5.5 0 000 .708z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8 12a.5.5 0 00.5-.5v-6a.5.5 0 00-1 0v6a.5.5 0 00.5.5z"
clip-rule="evenodd"></path>
</svg></span><span class="down" title="降序"><svg class="bi bi-file-arrow-down" width="1em" height="1em"
viewBox="0 0 16 16" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4 1h8a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V3a2 2 0 012-2zm0 1a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V3a1 1 0 00-1-1H4z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd"
d="M4.646 8.146a.5.5 0 01.708 0L8 10.793l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8 4a.5.5 0 01.5.5v6a.5.5 0 01-1 0v-6A.5.5 0 018 4z"
clip-rule="evenodd"></path>
</svg></span></th>
<th>上周评分</th>
<th class="select-name">这周评分<span class="up" title="升序"><svg class="bi bi-file-arrow-up" width="1em"
height="1em" viewBox="0 0 16 16"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4 1h8a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V3a2 2 0 012-2zm0 1a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V3a1 1 0 00-1-1H4z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd"
d="M4.646 7.854a.5.5 0 00.708 0L8 5.207l2.646 2.647a.5.5 0 00.708-.708l-3-3a.5.5 0 00-.708 0l-3 3a.5.5 0 000 .708z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8 12a.5.5 0 00.5-.5v-6a.5.5 0 00-1 0v6a.5.5 0 00.5.5z"
clip-rule="evenodd"></path>
</svg></span><span class="down" title="降序"><svg class="bi bi-file-arrow-down" width="1em" height="1em"
viewBox="0 0 16 16" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4 1h8a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V3a2 2 0 012-2zm0 1a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V3a1 1 0 00-1-1H4z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd"
d="M4.646 8.146a.5.5 0 01.708 0L8 10.793l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8 4a.5.5 0 01.5.5v6a.5.5 0 01-1 0v-6A.5.5 0 018 4z"
clip-rule="evenodd"></path>
</svg></span></th>
<th class="select-name">趋势<span class="up" title="升序"><svg class="bi bi-file-arrow-up" width="1em"
height="1em" viewBox="0 0 16 16"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4 1h8a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V3a2 2 0 012-2zm0 1a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V3a1 1 0 00-1-1H4z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd"
d="M4.646 7.854a.5.5 0 00.708 0L8 5.207l2.646 2.647a.5.5 0 00.708-.708l-3-3a.5.5 0 00-.708 0l-3 3a.5.5 0 000 .708z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8 12a.5.5 0 00.5-.5v-6a.5.5 0 00-1 0v6a.5.5 0 00.5.5z"
clip-rule="evenodd"></path>
</svg></span><span class="down" title="降序"><svg class="bi bi-file-arrow-down" width="1em" height="1em"
viewBox="0 0 16 16" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4 1h8a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V3a2 2 0 012-2zm0 1a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V3a1 1 0 00-1-1H4z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd"
d="M4.646 8.146a.5.5 0 01.708 0L8 10.793l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8 4a.5.5 0 01.5.5v6a.5.5 0 01-1 0v-6A.5.5 0 018 4z"
clip-rule="evenodd"></path>
</svg></span></th>
<th>上周评论</th>
<th class="select-name">这周评论<span class="up" title="升序"><svg class="bi bi-file-arrow-up" width="1em"
height="1em" viewBox="0 0 16 16"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4 1h8a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V3a2 2 0 012-2zm0 1a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V3a1 1 0 00-1-1H4z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd"
d="M4.646 7.854a.5.5 0 00.708 0L8 5.207l2.646 2.647a.5.5 0 00.708-.708l-3-3a.5.5 0 00-.708 0l-3 3a.5.5 0 000 .708z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8 12a.5.5 0 00.5-.5v-6a.5.5 0 00-1 0v6a.5.5 0 00.5.5z"
clip-rule="evenodd"></path>
</svg></span><span class="down" title="降序"><svg class="bi bi-file-arrow-down" width="1em" height="1em"
viewBox="0 0 16 16" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4 1h8a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V3a2 2 0 012-2zm0 1a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V3a1 1 0 00-1-1H4z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd"
d="M4.646 8.146a.5.5 0 01.708 0L8 10.793l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8 4a.5.5 0 01.5.5v6a.5.5 0 01-1 0v-6A.5.5 0 018 4z"
clip-rule="evenodd"></path>
</svg></span></th>
<th class="select-name">趋势<span class="up" title="升序"><svg class="bi bi-file-arrow-up" width="1em"
height="1em" viewBox="0 0 16 16"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4 1h8a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V3a2 2 0 012-2zm0 1a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V3a1 1 0 00-1-1H4z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd"
d="M4.646 7.854a.5.5 0 00.708 0L8 5.207l2.646 2.647a.5.5 0 00.708-.708l-3-3a.5.5 0 00-.708 0l-3 3a.5.5 0 000 .708z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8 12a.5.5 0 00.5-.5v-6a.5.5 0 00-1 0v6a.5.5 0 00.5.5z"
clip-rule="evenodd"></path>
</svg></span><span class="down" title="降序"><svg class="bi bi-file-arrow-down" width="1em" height="1em"
viewBox="0 0 16 16" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4 1h8a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V3a2 2 0 012-2zm0 1a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V3a1 1 0 00-1-1H4z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd"
d="M4.646 8.146a.5.5 0 01.708 0L8 10.793l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8 4a.5.5 0 01.5.5v6a.5.5 0 01-1 0v-6A.5.5 0 018 4z"
clip-rule="evenodd"></path>
</svg></span></th>
<th>上周大类</th>
<th class="select-name">这周大类 <span class="up" title="升序"><svg class="bi bi-file-arrow-up"
width="1em" height="1em"
viewBox="0 0 16 16"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4 1h8a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V3a2 2 0 012-2zm0 1a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V3a1 1 0 00-1-1H4z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd"
d="M4.646 7.854a.5.5 0 00.708 0L8 5.207l2.646 2.647a.5.5 0 00.708-.708l-3-3a.5.5 0 00-.708 0l-3 3a.5.5 0 000 .708z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8 12a.5.5 0 00.5-.5v-6a.5.5 0 00-1 0v6a.5.5 0 00.5.5z"
clip-rule="evenodd"></path>
</svg></span><span class="down" title="降序"><svg class="bi bi-file-arrow-down" width="1em" height="1em"
viewBox="0 0 16 16" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4 1h8a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V3a2 2 0 012-2zm0 1a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V3a1 1 0 00-1-1H4z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd"
d="M4.646 8.146a.5.5 0 01.708 0L8 10.793l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8 4a.5.5 0 01.5.5v6a.5.5 0 01-1 0v-6A.5.5 0 018 4z"
clip-rule="evenodd"></path>
</svg></span></th>
<th class="select-name">趋势<span class="up" title="升序"><svg class="bi bi-file-arrow-up" width="1em"
height="1em" viewBox="0 0 16 16"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4 1h8a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V3a2 2 0 012-2zm0 1a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V3a1 1 0 00-1-1H4z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd"
d="M4.646 7.854a.5.5 0 00.708 0L8 5.207l2.646 2.647a.5.5 0 00.708-.708l-3-3a.5.5 0 00-.708 0l-3 3a.5.5 0 000 .708z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8 12a.5.5 0 00.5-.5v-6a.5.5 0 00-1 0v6a.5.5 0 00.5.5z"
clip-rule="evenodd"></path>
</svg></span><span class="down" title="降序"><svg class="bi bi-file-arrow-down" width="1em" height="1em"
viewBox="0 0 16 16" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4 1h8a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V3a2 2 0 012-2zm0 1a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V3a1 1 0 00-1-1H4z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd"
d="M4.646 8.146a.5.5 0 01.708 0L8 10.793l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8 4a.5.5 0 01.5.5v6a.5.5 0 01-1 0v-6A.5.5 0 018 4z"
clip-rule="evenodd"></path>
</svg></span></th>
<th>上周小类</th>
<th class="select-name">这周小类 <span class="up" title="升序"><svg class="bi bi-file-arrow-up"
width="1em" height="1em"
viewBox="0 0 16 16"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4 1h8a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V3a2 2 0 012-2zm0 1a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V3a1 1 0 00-1-1H4z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd"
d="M4.646 7.854a.5.5 0 00.708 0L8 5.207l2.646 2.647a.5.5 0 00.708-.708l-3-3a.5.5 0 00-.708 0l-3 3a.5.5 0 000 .708z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8 12a.5.5 0 00.5-.5v-6a.5.5 0 00-1 0v6a.5.5 0 00.5.5z"
clip-rule="evenodd"></path>
</svg></span><span class="down" title="降序"><svg class="bi bi-file-arrow-down" width="1em" height="1em"
viewBox="0 0 16 16" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4 1h8a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V3a2 2 0 012-2zm0 1a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V3a1 1 0 00-1-1H4z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd"
d="M4.646 8.146a.5.5 0 01.708 0L8 10.793l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8 4a.5.5 0 01.5.5v6a.5.5 0 01-1 0v-6A.5.5 0 018 4z"
clip-rule="evenodd"></path>
</svg></span></th>
<th class="select-name">趋势<span class="up" title="升序"><svg class="bi bi-file-arrow-up" width="1em"
height="1em" viewBox="0 0 16 16"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4 1h8a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V3a2 2 0 012-2zm0 1a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V3a1 1 0 00-1-1H4z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd"
d="M4.646 7.854a.5.5 0 00.708 0L8 5.207l2.646 2.647a.5.5 0 00.708-.708l-3-3a.5.5 0 00-.708 0l-3 3a.5.5 0 000 .708z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8 12a.5.5 0 00.5-.5v-6a.5.5 0 00-1 0v6a.5.5 0 00.5.5z"
clip-rule="evenodd"></path>
</svg></span><span class="down" title="降序"><svg class="bi bi-file-arrow-down" width="1em" height="1em"
viewBox="0 0 16 16" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4 1h8a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V3a2 2 0 012-2zm0 1a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V3a1 1 0 00-1-1H4z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd"
d="M4.646 8.146a.5.5 0 01.708 0L8 10.793l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8 4a.5.5 0 01.5.5v6a.5.5 0 01-1 0v-6A.5.5 0 018 4z"
clip-rule="evenodd"></path>
</svg></span></th>
<th>Amazon</th>
</tr>
</thead>
</table>
</div>
<div class="bottom">
<table class="datatable">
<colgroup>
<col style="width: 120px;">
<col style="width: 80px;">
<col style="width: 80px;">
<col style="width: 80px;">
<col style="width: 80px;">
<col style="width: 80px;">
<col style="width: 80px;">
<col style="width: 80px;">
<col style="width: 80px;">
<col style="width: 80px;">
<col style="width: 90px;">
<col style="width: 90px;">
<col style="width: 90px;">
<col style="width: 90px;">
<col style="width: 90px;">
<col style="width: 90px;">
<col style="width: 80px;">
</colgroup>
<tbody class="item-list">
<tr class="row">
<td class="asin-name" title="电影主题V脸电镀仿古V字面具加厚磨砂带眼线PVC环保枫叶黑V字面具">B07SS4RX7F</td>
<td><span>6.85</span></td>
<td><span>8.99</span></td>
<td class="rise"><span>2.14</span>
<svg class="bi bi-arrow-up" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 3.5a.5.5 0 01.5.5v9a.5.5 0 01-1 0V4a.5.5 0 01.5-.5z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd"
d="M7.646 2.646a.5.5 0 01.708 0l3 3a.5.5 0 01-.708.708L8 3.707 5.354 6.354a.5.5 0 11-.708-.708l3-3z"
clip-rule="evenodd"></path>
</svg>
</td>
<td><span>4.26</span></td>
<td><span>4.40</span></td>
<td class="rise"><span>0.14</span>
<svg class="bi bi-arrow-up" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 3.5a.5.5 0 01.5.5v9a.5.5 0 01-1 0V4a.5.5 0 01.5-.5z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd"
d="M7.646 2.646a.5.5 0 01.708 0l3 3a.5.5 0 01-.708.708L8 3.707 5.354 6.354a.5.5 0 11-.708-.708l3-3z"
clip-rule="evenodd"></path>
</svg>
</td>
<td><span>3.29</span></td>
<td><span>4.00</span></td>
<td class="rise"><span>0.71</span>
<svg class="bi bi-arrow-up" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 3.5a.5.5 0 01.5.5v9a.5.5 0 01-1 0V4a.5.5 0 01.5-.5z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd"
d="M7.646 2.646a.5.5 0 01.708 0l3 3a.5.5 0 01-.708.708L8 3.707 5.354 6.354a.5.5 0 11-.708-.708l3-3z"
clip-rule="evenodd"></path>
</svg>
</td>
<td><span>15990.00</span></td>
<td><span>38345.43</span></td>
<td class="drop"><span>-22355.43</span>
<svg class="bi bi-arrow-down" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4.646 9.646a.5.5 0 01.708 0L8 12.293l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8 2.5a.5.5 0 01.5.5v9a.5.5 0 01-1 0V3a.5.5 0 01.5-.5z"
clip-rule="evenodd"></path>
</svg>
</td>
<td><span>106.57</span></td>
<td><span>307.71</span></td>
<td class="drop"><span>-201.14</span>
<svg class="bi bi-arrow-down" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4.646 9.646a.5.5 0 01.708 0L8 12.293l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8 2.5a.5.5 0 01.5.5v9a.5.5 0 01-1 0V3a.5.5 0 01.5-.5z"
clip-rule="evenodd"></path>
</svg>
</td>
<td><a href="https://www.amazon.es/dp/B07SS4RX7F/ref=sr_1_10" target="_blank">链接</a></td>
</tr>
<tr>
<td class="asin-name" title="鬼灭之刃cosplay服上弦叁猗窝座老婆COS恋雪和服女装---M">B086YMRLK2</td>
<td><span>59.00</span></td>
<td><span>59.00</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td>
<a href="https://www.amazon.es/Kimono-Japonesa-Tradicional-Cosplay-Amantes/dp/B086YMRLK2/ref=sr_1_10?dchild=1&m=A37IM294II6QJ7&marketplaceID=A1RKKUPIHCS9HS&qid=1586605868&s=merchant-items&sr=1-10"
target="_blank">链接</a></td>
</tr>
<tr class="row">
<td class="asin-name"
title="一套一卖（9寸10个,7寸10个,纸巾20张,纸杯10个，吸管10个，刀叉勺各10把，三角旗 桌布 现货跳舞女孩派对用品 巴黎舞女孩生日装饰 儿童女孩生日用品">
B083FXLZBR
</td>
<td><span>21.99</span></td>
<td><span>21.99</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td><span>775921.00</span></td>
<td><span>782608.00</span></td>
<td class="drop"><span>-6687.00</span>
<svg class="bi bi-arrow-down" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4.646 9.646a.5.5 0 01.708 0L8 12.293l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8 2.5a.5.5 0 01.5.5v9a.5.5 0 01-1 0V3a.5.5 0 01.5-.5z"
clip-rule="evenodd"></path>
</svg>
</td>
<td><span>944.43</span></td>
<td><span>965.57</span></td>
<td class="drop"><span>-21.14</span>
<svg class="bi bi-arrow-down" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4.646 9.646a.5.5 0 01.708 0L8 12.293l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8 2.5a.5.5 0 01.5.5v9a.5.5 0 01-1 0V3a.5.5 0 01.5-.5z"
clip-rule="evenodd"></path>
</svg>
</td>
<td>
<a href="https://www.amazon.es/Baipin-Desechable-Desechables-Aniversario-Celebraci%C3%B3n/dp/B083FXLZBR/ref=sr_1_3?dchild=1&m=A37IM294II6QJ7&marketplaceID=A1RKKUPIHCS9HS&qid=1586605868&s=merchant-items&sr=1-3"
target="_blank">链接</a></td>
</tr>
<tr>
<td class="asin-name" title="儿童水枪玩具背包男女孩高压抽拉式大号水枪宝宝戏水沙滩热销玩具">B086KWZYYJ</td>
<td><span>23.99</span></td>
<td><span>23.99</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td>
<a href="https://www.amazon.es/Baipin-Bomberos-Infantil-Pulverizaci%C3%B3n-Pistolas/dp/B086KWZYYJ/ref=sr_1_14?dchild=1&m=A37IM294II6QJ7&marketplaceID=A1RKKUPIHCS9HS&qid=1586605868&s=merchant-items&sr=1-14"
target="_blank">链接</a></td>
</tr>
<tr class="row">
<td class="asin-name" title="鬼灭之刃cosplay炭治郎祢豆子血迹灶门祢豆子和服---L">B086YQQXVC</td>
<td><span>59.99</span></td>
<td><span>59.99</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td>
<a href="https://www.amazon.es/Kimono-Cosplay-Amantes-Tradicional-Japonesa/dp/B086YQQXVC/ref=sr_1_7?dchild=1&m=A37IM294II6QJ7&marketplaceID=A1RKKUPIHCS9HS&qid=1586605868&s=merchant-items&sr=1-7"
target="_blank">链接</a></td>
</tr>
<tr>
<td class="asin-name" title="彩绘狐狸面具妖狐半脸女日式---款式8">B086MPYKZS</td>
<td><span>7.69</span></td>
<td><span>7.69</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td>
<a href="https://www.amazon.es/Baipin-M%C3%A1scara-Japon%C3%A9s-Mascarada-Halloween/dp/B086MPYKZS/ref=sr_1_11?dchild=1&m=A37IM294II6QJ7&marketplaceID=A1RKKUPIHCS9HS&qid=1586605868&s=merchant-items&sr=1-11"
target="_blank">链接</a></td>
</tr>
<tr class="row">
<td class="asin-name" title="阿拉丁神灯茉莉公主裙儿童cosplay动漫（BX1639-蓝色150cm）">B07YYC85WX</td>
<td><span>19.99</span></td>
<td><span>19.99</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td><span>246732.00</span></td>
<td><span>248075.29</span></td>
<td class="drop"><span>-1343.29</span>
<svg class="bi bi-arrow-down" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4.646 9.646a.5.5 0 01.708 0L8 12.293l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8 2.5a.5.5 0 01.5.5v9a.5.5 0 01-1 0V3a.5.5 0 01.5-.5z"
clip-rule="evenodd"></path>
</svg>
</td>
<td><span>2258.29</span></td>
<td><span>2290.00</span></td>
<td class="drop"><span>-31.71</span>
<svg class="bi bi-arrow-down" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4.646 9.646a.5.5 0 01.708 0L8 12.293l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8 2.5a.5.5 0 01.5.5v9a.5.5 0 01-1 0V3a.5.5 0 01.5-.5z"
clip-rule="evenodd"></path>
</svg>
</td>
<td>
<a href="https://www.amazon.es/Baipin-Lentejuelas-Pantalones-Cumplea%C3%B1os-Halloween/dp/B07YYC85WX/ref=sr_1_4?dchild=1&m=A37IM294II6QJ7&marketplaceID=A1RKKUPIHCS9HS&qid=1586605868&s=merchant-items&sr=1-4"
target="_blank">链接</a></td>
</tr>
<tr>
<td class="asin-name" title="【现货】爱莎公主礼服尺码130+配饰蓝色6件套套装">B0868R9XDX</td>
<td><span>28.99</span></td>
<td><span>28.99</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td>
<a href="https://www.amazon.es/Baipin-Vestido-Princesa-Disfraz-Cumplea%C3%B1os/dp/B0868R9XDX/ref=sr_1_15?dchild=1&m=A37IM294II6QJ7&marketplaceID=A1RKKUPIHCS9HS&qid=1586605868&s=merchant-items&sr=1-15"
target="_blank">链接</a></td>
</tr>
<tr class="row">
<td class="asin-name" title="鬼灭之刃cosplay炭治郎祢豆子血迹灶门祢豆子和服---S">B086YPP8JP</td>
<td><span>49.99</span></td>
<td><span>49.99</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td>
<a href="https://www.amazon.es/Kimono-Tradicional-Japonesa-Cosplay-Amantes/dp/B086YPP8JP/ref=sr_1_8?dchild=1&m=A37IM294II6QJ7&marketplaceID=A1RKKUPIHCS9HS&qid=1586605868&s=merchant-items&sr=1-8"
target="_blank">链接</a></td>
</tr>
<tr>
<td class="asin-name" title="儿童乐器吉他玩具4弦-36cm斑马">B086MH7KR5</td>
<td><span>9.99</span></td>
<td><span>9.99</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td><span>0.00</span></td>
<td><span>0.00</span></td>
<td><span>0</span></td>
<td><span>63026.57</span></td>
<td><span>86258.86</span></td>
<td class="drop"><span>-23232.29</span>
<svg class="bi bi-arrow-down" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4.646 9.646a.5.5 0 01.708 0L8 12.293l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8 2.5a.5.5 0 01.5.5v9a.5.5 0 01-1 0V3a.5.5 0 01.5-.5z"
clip-rule="evenodd"></path>
</svg>
</td>
<td><span>112.57</span></td>
<td><span>143.43</span></td>
<td class="drop"><span>-30.86</span>
<svg class="bi bi-arrow-down" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4.646 9.646a.5.5 0 01.708 0L8 12.293l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8 2.5a.5.5 0 01.5.5v9a.5.5 0 01-1 0V3a.5.5 0 01.5-.5z"
clip-rule="evenodd"></path>
</svg>
</td>
<td>
<a href="https://www.amazon.es/Baipin-Guitarra-Instrumento-Temprano-Educaci%C3%B3n/dp/B086MH7KR5/ref=sr_1_1?dchild=1&m=A37IM294II6QJ7&marketplaceID=A1RKKUPIHCS9HS&qid=1586605868&s=merchant-items&sr=1-1"
target="_blank">链接</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function upSort(index) {
/**
* 冒泡排序 升续
* **/
let tabNode = document.getElementsByTagName("tbody")[0];
let tr = tabNode.rows;
let trArray = new Array();
for (let x = 0; x < tr.length; x++) { //加入到数组中
trArray.push(tr[x]);
}
for (let i = 0; i < trArray.length; i++) {//升排序
for (let j = 0; j < trArray.length - i - 1; j++) {
if (parseFloat(trArray[j].cells[index].childNodes[0].childNodes[0].nodeValue) < parseFloat(trArray[j + 1].cells[index].childNodes[0].childNodes[0].nodeValue)) {
let tmp = trArray[j];
trArray[j] = trArray[j + 1];
trArray[j + 1] = tmp;
}
}
}
for (let k = 0; k < trArray.length; k++) {
trArray[k].classList.remove("row");
if (k % 2 === 0) {
trArray[k].classList.add("row");
}
tabNode.appendChild(trArray[k]);
}
} function downSort(index) {
/**
* 冒泡排序 降续
* **/
let tabNode = document.getElementsByTagName("tbody")[0];
let tr = tabNode.rows;
let trArray = new Array();
for (let x = 0; x < tr.length; x++) { //加入到数组中
trArray.push(tr[x]);
}
for (let i = 0; i < trArray.length; i++) {//降排序
for (let j = 0; j < trArray.length - i - 1; j++) {
if (parseFloat(trArray[j].cells[index].childNodes[0].childNodes[0].nodeValue) > parseFloat(trArray[j + 1].cells[index].childNodes[0].childNodes[0].nodeValue)) {
let tmp = trArray[j];
trArray[j] = trArray[j + 1];
trArray[j + 1] = tmp;
}
}
}
for (let k = 0; k < trArray.length; k++) {
trArray[k].classList.remove("row");
if (k % 2 === 0) {
trArray[k].classList.add("row");
}
tabNode.appendChild(trArray[k]);
}
} $(window).keydown(function (event) {
if (event.keyCode === 13) {
let asin = $("#search").val();
if (asin.length > 0) {
showCanvas(asin)
} else {
alert("ASIN码不能为空哦！")
}
}
});
$(".select-name").on("click", ".up", function () {
/**
* 点击上升按钮
* **/
let index = $(this).parent().index(); //获取点击的索引位置
upSort(index)
});
$(".select-name").on("click", ".down", function () {
/**
* 点击下降按钮
* **/
let index = $(this).parent().index(); //获取点击的索引位置
downSort(index);
});
</script> </body>
</html>
JS table排序的更多相关文章
- Table Dragger - 简单的 JS 拖放排序表格插件
Table Dragger 是一个极简的实现拖放排序的表格插件,纯 JavaScript 库,不依赖 jQuery.用于构建操作方便的拖放排序功能,超级容易设置,有平滑的动画,支持触摸事件. 在线演示 ...
- javascript table排序之jquery.tablesorter.js
table排序 jquery.tablesorter.js 一.Demo下载地址: 1.tablesorter.js下载地址: http://download.csdn.net/detail/zhan ...
- js实现table排序（jQuery下的jquery.sortElements）
项目中要实现table排序的功能. 网上有非常多解决方式,非常多都基于jQuery. jquery.tablesorter.大小17KB.只是他的首页在ie10下兼容性有点问题. DataTables ...
- Table排序
<html> <head> <title>tablesorter表单排序插件</title> <link type ="text/css ...
- JS表格排序
var employees = [] employees[0] = { name: "George", age: 32, retiredate: "March 12, 2 ...
- 转：js,jQuery 排序的实现,网页标签排序的实现,标签排序
js,jQuery 排序的实现: 重点: 想要实现排序,最简单的方法就是 先把标签用jQuery读进对象数组 用js排序好对象数组 (针对对象数组进行排序, 不要试图直接对网页的内容进行直接更改) 用 ...
- js拼音排序
js拼音排序 var arr =['a','c','b','b']; arr.sort( function compareFunction(p1, p2) { return p1.localeComp ...
- lua table排序报错与解决
lua table排序 table的sort函数 比如按照大小进行排序,下面这种写法在某些情况下可能会排序错误,甚至报invalid order function for sorting table. ...
- [js] - 关于js的排序sort
js的排序sort并不能一次排序好 function solution(nums){ return nums.sort(sortNumber); } function sortNumber(a, b) ...
随机推荐
- 仿ATM程序软件
一.目标: ATM仿真软件 1 系统的基本功能 ATM的管理系统其基本功能如下:密码验证机制:吞锁卡机制:存取款功能:账户查询功能:转账功能等. 要求 要能提供以下几个基本功能: (1)系统内的相关信 ...
- Codeforces Round #642 (Div. 3) D. Constructing the Array (优先队列)
题意:有一个长度为\(n\)元素均为\(0\)的序列,进行\(n\)次操作构造出一个新序列\(a\):每次选择最长的连续为\(0\)的区间\([l,r]\),使得第\(i\)次操作时,\(a[\fra ...
- GYM101810 ACM International Collegiate Programming Contest, Amman Collegiate Programming Contest (2018) M. Greedy Pirate (LCA)
题意:有\(n\)个点,\(n-1\)条边,每条边正向和反向有两个权值,且每条边最多只能走两次,有\(m\)次询问,问你从\(u\)走到\(v\)的最大权值是多少. 题解:可以先在纸上画一画,不难发现 ...
- 2.PowerShell概述
PowerShell PowerShell命令窗一般随系统带着,运行->输入:powershell,即可打开命令窗口. 命令 Powershell有诸多命令,兼容cmd命令 语法和命令 在此我推 ...
- Navicat 快捷键 for Mysql
常用快捷键: 1. ctrl + q: 打开新查询窗口 2. ctrl + r: 运行当前窗口内的所有语句 3. ctrl + w: 关闭当前窗口 4. F6: 打开一个MySQL命令行窗口 5. ...
- C++构造函数、复制函数易错点
C++中复制函数在三种情况下自动调用: 用一个对象初始化另一个对象 函数的参数为对象 函数的返回值为对象 下面用几个代码片段解释复制函数的调用中的一些常见"坑": 一:默认复制函数 ...
- BIM轻量化——浏览器展示
此篇博客仅为记录,记录钻研过程的零碎思路. 之前考虑过很多可能性,对rvt文件转换格式:.obj.JSON..gltf等等.这些可能性前人一般都尝试过,而且也都做出来了东西. ...
- codeforces 1016C - Vasya And The Mushrooms 【构造 + 思维】
题目链接:戳这里 题意:从(1,1)出发,一遍把格子走完,每个格子只能走一次.问怎么走总和最大. 解题思路:画图可知,总共就3种走法的混合. dw: 样例1的走法 up: 样例1反过来的走法 lp: ...
- Ubuntu桌面消失
Ubuntu桌面消失 按Ctrl + Alt + F1, 切回文本模式, 输入用户名和密码登录. 重装桌面和unity: sudo apt-get update sudo apt-get instal ...
- HTML5 Learning Paths
HTML5 Learning Paths HTML5 Expert refs https://developer.mozilla.org/en-US/docs/Web/HTML xgqfrms 201 ...