zoukankan      html  css  js  c++  java

  • 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;
             100%;
            opacity: 0.8;
        }

        div {
            padding: 15px;
        }

        .canvas {
            margin: 0 auto;
            min-height: 100px;
             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 {
             100%;
            border-collapse: collapse;
            background-color: white;
            border: 1px solid #bbb;
        }

        .bottom table {
             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=" 120px;">
                    <col style=" 80px;">
                    <col style=" 80px;">
                    <col style=" 80px;">
                    <col style=" 80px;">
                    <col style=" 80px;">
                    <col style=" 80px;">
                    <col style=" 80px;">
                    <col style=" 80px;">
                    <col style=" 80px;">
                    <col style=" 90px;">
                    <col style=" 90px;">
                    <col style=" 90px;">
                    <col style=" 90px;">
                    <col style=" 90px;">
                    <col style=" 90px;">
                    <col style=" 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=" 120px;">
                    <col style=" 80px;">
                    <col style=" 80px;">
                    <col style=" 80px;">
                    <col style=" 80px;">
                    <col style=" 80px;">
                    <col style=" 80px;">
                    <col style=" 80px;">
                    <col style=" 80px;">
                    <col style=" 80px;">
                    <col style=" 90px;">
                    <col style=" 90px;">
                    <col style=" 90px;">
                    <col style=" 90px;">
                    <col style=" 90px;">
                    <col style=" 90px;">
                    <col style=" 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>

    　　

    此时此刻，非我莫属
  • 相关阅读:
    PsySH——PHP交互式控制台
    PHP通过ssh或socks5读取远程服务器的mysql数据库
    构建：vue项目配置后端接口服务信息
    module.exports用法
    PhpStorm连接服务器，开始自动上传功能
    JavaScript Array.some()方法用法
    vue-router query和params传参(接收参数)，$router、$route的区别
    ES6箭头函数（Arrow Functions）
    工作中常用到的ES6语法
    VueJs2.0建议学习路线
  • 原文地址：https://www.cnblogs.com/taozhengquan/p/13166125.html
Copyright © 2011-2022 走看看