吾爱破解 - LCG - LSG |安卓破解|病毒分析|www.52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

搜索
查看: 166|回复: 4

[Web] JQuery table表格TR 按列数据排序

[复制链接]
since347860 发表于 2020-8-1 13:32
       最近做一个项目,用到表格table,项目要求是可以点击头部指定标题以列的参数进行排序的,第一想法是用JQuery DataTables,因为方便嘛,但用了才知道这东东,好用是好用,但排序后图片都要重新加载影响用户体验,而且想要自定义样式也是一大问题;一气之下,只能到处找资料,最后在网上找到可用的代码经过自己优化后分享给大家,以免走弯路,话不多说直接上代码:

<table class="data-table" style="width:100%;border-spacing: 0;">
<thead><tr><th class="nosort" style="text-align: center;" _index="0">#</th><th class="nosort" style="text-align: left;" _index="1"><div class="table_cell">币种<span class="sort_ico" style="display:none;"><i class="up"></i> <i class="down"></i></span></div></th><th _index="2"><div class="table_cell" style="text-align: right;">市值<span> (¥)</span> <span class="sort_ico" style="display:;"><i class="icon-up"></i> <i class="icon-down"></i></span></div></th><th _index="3"><div class="table_cell" style="text-align: right;">最新价<span> (¥)</span> <span class="sort_ico" style="display:;"><i class="icon-up"></i> <i class="icon-down"></i></span></div></th><th _index="4"><div class="table_cell" style="text-align: right;">24H涨幅<span class="sort_ico" style="display:;"><i class="icon-up"></i> <i class="icon-down"></i></span></div></th></tr></thead>

  <tbody>
    <tr class="item">
      <td>
        <div class="table_cell" style="text-align: center;">
          <span class="tableNum">1</span></div>
      </td>
      <td>
        <div class="table_cell">
          <a href="javascript:;" title="比特币">
            <span class="coinName">
              <img class="lazyload" data-original="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9iaXRjb2luLnBuZz94LW9zcy1wcm9jZXNzPXN0eWxlL2NvaW5fMzZfd2VicA==" alt="" src="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9iaXRjb2luLnBuZz94LW9zcy1wcm9jZXNzPXN0eWxlL2NvaW5fMzZfd2VicA==" style="display: inline;">BTC</span>
            <br>
            <span class="coinName_zh">比特币</span></a>
        </div>
      </td>
      <td _id="sz" _data="1457750831090">
        <div class="table_cell" style="text-align: right;">
          <span class="">1.46万亿</span></div>
      </td>
      <td _id="dj" _data="79030.69">
        <div class="table_cell" style="text-align: right;">
          <span class="">79030.69</span></div>
      </td>
      <td _id="bf" _data="3.28">
        <div class="table_cell" style="text-align: right;">
          <span class="textGreen">+3.28%</span></div>
      </td>
    </tr>
    <tr class="item">
      <td>
        <div class="table_cell" style="text-align: center;">
          <span class="tableNum">2</span></div>
      </td>
      <td>
        <div class="table_cell">
          <a href="javascript:;" title="以太坊">
            <span class="coinName">
              <img class="lazyload" data-original="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9ldGhlcmV1bS5wbmc/eC1vc3MtcHJvY2Vzcz1zdHlsZS9jb2luXzM2X3dlYnA=" alt="" src="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9ldGhlcmV1bS5wbmc/eC1vc3MtcHJvY2Vzcz1zdHlsZS9jb2luXzM2X3dlYnA=" style="display: inline;">ETH</span>
            <br>
            <span class="coinName_zh">以太坊</span></a>
        </div>
      </td>
      <td _id="sz" _data="273851498741">
        <div class="table_cell" style="text-align: right;">
          <span class="">2738.51亿</span></div>
      </td>
      <td _id="dj" _data="2446.13">
        <div class="table_cell" style="text-align: right;">
          <span class="">2446.13</span></div>
      </td>
      <td _id="bf" _data="6.46">
        <div class="table_cell" style="text-align: right;">
          <span class="textGreen">+6.46%</span></div>
      </td>
    </tr>
    <tr class="item">
      <td>
        <div class="table_cell" style="text-align: center;">
          <span class="tableNum">3</span></div>
      </td>
      <td>
        <div class="table_cell">
          <a href="javascript:;" title="瑞波币">
            <span class="coinName">
              <img class="lazyload" data-original="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9yaXBwbGUucG5nP3gtb3NzLXByb2Nlc3M9c3R5bGUvY29pbl8zNl93ZWJw" alt="" src="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9yaXBwbGUucG5nP3gtb3NzLXByb2Nlc3M9c3R5bGUvY29pbl8zNl93ZWJw" style="display: inline;">XRP</span>
            <br>
            <span class="coinName_zh">瑞波币</span></a>
        </div>
      </td>
      <td _id="sz" _data="79406444323">
        <div class="table_cell" style="text-align: right;">
          <span class="">794.06亿</span></div>
      </td>
      <td _id="dj" _data="1.817">
        <div class="table_cell" style="text-align: right;">
          <span class="">1.817</span></div>
      </td>
      <td _id="bf" _data="7.46">
        <div class="table_cell" style="text-align: right;">
          <span class="textGreen">+7.46%</span></div>
      </td>
    </tr>
    <tr class="item">
      <td>
        <div class="table_cell" style="text-align: center;">
          <span class="tableNum">4</span></div>
      </td>
      <td>
        <div class="table_cell">
          <a href="javascript:;" title="泰达币">
            <span class="coinName">
              <img class="lazyload" data-original="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS90ZXRoZXIucG5nP3gtb3NzLXByb2Nlc3M9c3R5bGUvY29pbl8zNl93ZWJw" alt="" src="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS90ZXRoZXIucG5nP3gtb3NzLXByb2Nlc3M9c3R5bGUvY29pbl8zNl93ZWJw" style="display: inline;">USDT</span>
            <br>
            <span class="coinName_zh">泰达币</span></a>
        </div>
      </td>
      <td _id="sz" _data="69791836699">
        <div class="table_cell" style="text-align: right;">
          <span class="">697.92亿</span></div>
      </td>
      <td _id="dj" _data="6.98">
        <div class="table_cell" style="text-align: right;">
          <span class="">6.98</span></div>
      </td>
      <td _id="bf" _data="0.01">
        <div class="table_cell" style="text-align: right;">
          <span class="textGreen">+0.01%</span></div>
      </td>
    </tr>
    <tr class="item">
      <td>
        <div class="table_cell" style="text-align: center;">
          <span class="tableNum">5</span></div>
      </td>
      <td>
        <div class="table_cell">
          <a href="javascript:;" title="比特现金">
            <span class="coinName">
              <img class="lazyload" data-original="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9iaXRjb2luLWNhc2gucG5nP3gtb3NzLXByb2Nlc3M9c3R5bGUvY29pbl8zNl93ZWJw" alt="" src="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9iaXRjb2luLWNhc2gucG5nP3gtb3NzLXByb2Nlc3M9c3R5bGUvY29pbl8zNl93ZWJw" style="display: inline;">BCH</span>
            <br>
            <span class="coinName_zh">比特现金</span></a>
        </div>
      </td>
      <td _id="sz" _data="38971651132">
        <div class="table_cell" style="text-align: right;">
          <span class="">389.72亿</span></div>
      </td>
      <td _id="dj" _data="2132.59">
        <div class="table_cell" style="text-align: right;">
          <span class="">2132.59</span></div>
      </td>
      <td _id="bf" _data="6.42">
        <div class="table_cell" style="text-align: right;">
          <span class="textGreen">+6.42%</span></div>
      </td>
    </tr>
    <tr class="item">
      <td>
        <div class="table_cell" style="text-align: center;">
          <span class="tableNum">6</span></div>
      </td>
      <td>
        <div class="table_cell">
          <a href="javascript:;" title="比特币SV">
            <span class="coinName">
              <img class="lazyload" data-original="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9iaXRjb2luLWNhc2gtc3YucG5nP3gtb3NzLXByb2Nlc3M9c3R5bGUvY29pbl8zNl93ZWJw" alt="" src="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9iaXRjb2luLWNhc2gtc3YucG5nP3gtb3NzLXByb2Nlc3M9c3R5bGUvY29pbl8zNl93ZWJw" style="display: inline;">BSV</span>
            <br>
            <span class="coinName_zh">比特币SV</span></a>
        </div>
      </td>
      <td _id="sz" _data="30517698339">
        <div class="table_cell" style="text-align: right;">
          <span class="">305.18亿</span></div>
      </td>
      <td _id="dj" _data="1670.21">
        <div class="table_cell" style="text-align: right;">
          <span class="">1670.21</span></div>
      </td>
      <td _id="bf" _data="12.68">
        <div class="table_cell" style="text-align: right;">
          <span class="textGreen">+12.68%</span></div>
      </td>
    </tr>
    <tr class="item">
      <td>
        <div class="table_cell" style="text-align: center;">
          <span class="tableNum">7</span></div>
      </td>
      <td>
        <div class="table_cell">
          <a href="javascript:;" title="莱特币">
            <span class="coinName">
              <img class="lazyload" data-original="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9saXRlY29pbi5wbmc/eC1vc3MtcHJvY2Vzcz1zdHlsZS9jb2luXzM2X3dlYnA=" alt="" src="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9saXRlY29pbi5wbmc/eC1vc3MtcHJvY2Vzcz1zdHlsZS9jb2luXzM2X3dlYnA=" style="display: inline;">LTC</span>
            <br>
            <span class="coinName_zh">莱特币</span></a>
        </div>
      </td>
      <td _id="sz" _data="26438803555">
        <div class="table_cell" style="text-align: right;">
          <span class="">264.39亿</span></div>
      </td>
      <td _id="dj" _data="413.12">
        <div class="table_cell" style="text-align: right;">
          <span class="">413.12</span></div>
      </td>
      <td _id="bf" _data="5.84">
        <div class="table_cell" style="text-align: right;">
          <span class="textGreen">+5.84%</span></div>
      </td>
    </tr>
    <tr class="item">
      <td>
        <div class="table_cell" style="text-align: center;">
          <span class="tableNum">8</span></div>
      </td>
      <td>
        <div class="table_cell">
          <a href="javascript:;" title="艾达币">
            <span class="coinName">
              <img class="lazyload" data-original="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9jYXJkYW5vLnBuZz94LW9zcy1wcm9jZXNzPXN0eWxlL2NvaW5fMzZfd2VicA==" alt="" src="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9jYXJkYW5vLnBuZz94LW9zcy1wcm9jZXNzPXN0eWxlL2NvaW5fMzZfd2VicA==" style="display: inline;">ADA</span>
            <br>
            <span class="coinName_zh">艾达币</span></a>
        </div>
      </td>
      <td _id="sz" _data="25484919865">
        <div class="table_cell" style="text-align: right;">
          <span class="">254.85亿</span></div>
      </td>
      <td _id="dj" _data="0.9828">
        <div class="table_cell" style="text-align: right;">
          <span class="">0.9828</span></div>
      </td>
      <td _id="bf" _data="1.43">
        <div class="table_cell" style="text-align: right;">
          <span class="textGreen">+1.43%</span></div>
      </td>
    </tr>
    <tr class="item">
      <td>
        <div class="table_cell" style="text-align: center;">
          <span class="tableNum">9</span></div>
      </td>
      <td>
        <div class="table_cell">
          <a href="javascript:;" title="币安币">
            <span class="coinName">
              <img class="lazyload" data-original="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9iaW5hbmNlLWNvaW4ucG5nP3gtb3NzLXByb2Nlc3M9c3R5bGUvY29pbl8zNl93ZWJw" alt="" src="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9iaW5hbmNlLWNvaW4ucG5nP3gtb3NzLXByb2Nlc3M9c3R5bGUvY29pbl8zNl93ZWJw" style="display: inline;">BNB</span>
            <br>
            <span class="coinName_zh">币安币</span></a>
        </div>
      </td>
      <td _id="sz" _data="22107621751">
        <div class="table_cell" style="text-align: right;">
          <span class="">221.08亿</span></div>
      </td>
      <td _id="dj" _data="144.81">
        <div class="table_cell" style="text-align: right;">
          <span class="">144.81</span></div>
      </td>
      <td _id="bf" _data="4.05">
        <div class="table_cell" style="text-align: right;">
          <span class="textGreen">+4.05%</span></div>
      </td>
    </tr>
    <tr class="item">
      <td>
        <div class="table_cell" style="text-align: center;">
          <span class="tableNum">10</span></div>
      </td>
      <td>
        <div class="table_cell">
          <a href="javascript:;" title="柚子">
            <span class="coinName">
              <img class="lazyload" data-original="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9lb3MucG5nP3gtb3NzLXByb2Nlc3M9c3R5bGUvY29pbl8zNl93ZWJw" alt="" src="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9lb3MucG5nP3gtb3NzLXByb2Nlc3M9c3R5bGUvY29pbl8zNl93ZWJw" style="display: inline;">EOS</span>
            <br>
            <span class="coinName_zh">柚子</span></a>
        </div>
      </td>
      <td _id="sz" _data="20650238899">
        <div class="table_cell" style="text-align: right;">
          <span class="">206.50亿</span></div>
      </td>
      <td _id="dj" _data="22.0953">
        <div class="table_cell" style="text-align: right;">
          <span class="">22.0953</span></div>
      </td>
      <td _id="bf" _data="5.07">
        <div class="table_cell" style="text-align: right;">
          <span class="textGreen">+5.07%</span></div>
      </td>
    </tr>
    <tr class="item">
      <td>
        <div class="table_cell" style="text-align: center;">
          <span class="tableNum">11</span></div>
      </td>
      <td>
        <div class="table_cell">
          <a href="javascript:;" title="ChainLink">
            <span class="coinName">
              <img class="lazyload" data-original="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9jaGFpbmxpbmsucG5nP3gtb3NzLXByb2Nlc3M9c3R5bGUvY29pbl8zNl93ZWJw" alt="" src="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9jaGFpbmxpbmsucG5nP3gtb3NzLXByb2Nlc3M9c3R5bGUvY29pbl8zNl93ZWJw" style="display: inline;">LINK</span>
            <br>
            <span class="coinName_zh">ChainLink</span></a>
        </div>
      </td>
      <td _id="sz" _data="18942417692">
        <div class="table_cell" style="text-align: right;">
          <span class="">189.42亿</span></div>
      </td>
      <td _id="dj" _data="54.1205">
        <div class="table_cell" style="text-align: right;">
          <span class="">54.1205</span></div>
      </td>
      <td _id="bf" _data="0.83">
        <div class="table_cell" style="text-align: right;">
          <span class="textGreen">+0.83%</span></div>
      </td>
    </tr>
    <tr class="item">
      <td>
        <div class="table_cell" style="text-align: center;">
          <span class="tableNum">12</span></div>
      </td>
      <td>
        <div class="table_cell">
          <a href="javascript:;" title="Tezos">
            <span class="coinName">
              <img class="lazyload" data-original="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS90ZXpvcy5wbmc/eC1vc3MtcHJvY2Vzcz1zdHlsZS9jb2luXzM2X3dlYnA=" alt="" src="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS90ZXpvcy5wbmc/eC1vc3MtcHJvY2Vzcz1zdHlsZS9jb2luXzM2X3dlYnA=" style="display: inline;">XTZ</span>
            <br>
            <span class="coinName_zh">Tezos</span></a>
        </div>
      </td>
      <td _id="sz" _data="14793845703">
        <div class="table_cell" style="text-align: right;">
          <span class="">147.94亿</span></div>
      </td>
      <td _id="dj" _data="20.0606">
        <div class="table_cell" style="text-align: right;">
          <span class="">20.0606</span></div>
      </td>
      <td _id="bf" _data="1.94">
        <div class="table_cell" style="text-align: right;">
          <span class="textGreen">+1.94%</span></div>
      </td>
    </tr>
    <tr class="item">
      <td>
        <div class="table_cell" style="text-align: center;">
          <span class="tableNum">13</span></div>
      </td>
      <td>
        <div class="table_cell">
          <a href="javascript:;" title="恒星币">
            <span class="coinName">
              <img class="lazyload" data-original="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9zdGVsbGFyLnBuZz94LW9zcy1wcm9jZXNzPXN0eWxlL2NvaW5fMzZfd2VicA==" alt="" src="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9zdGVsbGFyLnBuZz94LW9zcy1wcm9jZXNzPXN0eWxlL2NvaW5fMzZfd2VicA==" style="display: inline;">XLM</span>
            <br>
            <span class="coinName_zh">恒星币</span></a>
        </div>
      </td>
      <td _id="sz" _data="14104368758">
        <div class="table_cell" style="text-align: right;">
          <span class="">141.04亿</span></div>
      </td>
      <td _id="dj" _data="0.7031">
        <div class="table_cell" style="text-align: right;">
          <span class="">0.7031</span></div>
      </td>
      <td _id="bf" _data="5.57">
        <div class="table_cell" style="text-align: right;">
          <span class="textGreen">+5.57%</span></div>
      </td>
    </tr>
    <tr class="item">
      <td>
        <div class="table_cell" style="text-align: center;">
          <span class="tableNum">14</span></div>
      </td>
      <td>
        <div class="table_cell">
          <a href="javascript:;" title="OK币">
            <span class="coinName">
              <img class="lazyload" data-original="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9va2IucG5nP3gtb3NzLXByb2Nlc3M9c3R5bGUvY29pbl8zNl93ZWJw" alt="" src="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9va2IucG5nP3gtb3NzLXByb2Nlc3M9c3R5bGUvY29pbl8zNl93ZWJw" style="display: inline;">OKB</span>
            <br>
            <span class="coinName_zh">OK币</span></a>
        </div>
      </td>
      <td _id="sz" _data="11500197515">
        <div class="table_cell" style="text-align: right;">
          <span class="">115.00亿</span></div>
      </td>
      <td _id="dj" _data="41.1704">
        <div class="table_cell" style="text-align: right;">
          <span class="">41.1704</span></div>
      </td>
      <td _id="bf" _data="2.68">
        <div class="table_cell" style="text-align: right;">
          <span class="textGreen">+2.68%</span></div>
      </td>
    </tr>
    <tr class="item">
      <td>
        <div class="table_cell" style="text-align: center;">
          <span class="tableNum">15</span></div>
      </td>
      <td>
        <div class="table_cell">
          <a href="javascript:;" title="门罗币">
            <span class="coinName">
              <img class="lazyload" data-original="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9tb25lcm8ucG5nP3gtb3NzLXByb2Nlc3M9c3R5bGUvY29pbl8zNl93ZWJw" alt="" src="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9tb25lcm8ucG5nP3gtb3NzLXByb2Nlc3M9c3R5bGUvY29pbl8zNl93ZWJw" style="display: inline;">XMR</span>
            <br>
            <span class="coinName_zh">门罗币</span></a>
        </div>
      </td>
      <td _id="sz" _data="10156846537">
        <div class="table_cell" style="text-align: right;">
          <span class="">101.57亿</span></div>
      </td>
      <td _id="dj" _data="593.08">
        <div class="table_cell" style="text-align: right;">
          <span class="">593.08</span></div>
      </td>
      <td _id="bf" _data="4.12">
        <div class="table_cell" style="text-align: right;">
          <span class="textGreen">+4.12%</span></div>
      </td>
    </tr>
    <tr class="item">
      <td>
        <div class="table_cell" style="text-align: center;">
          <span class="tableNum">16</span></div>
      </td>
      <td>
        <div class="table_cell">
          <a href="javascript:;" title="波场">
            <span class="coinName">
              <img class="lazyload" data-original="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS90cm9uLnBuZz94LW9zcy1wcm9jZXNzPXN0eWxlL2NvaW5fMzZfd2VicA==" alt="" src="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS90cm9uLnBuZz94LW9zcy1wcm9jZXNzPXN0eWxlL2NvaW5fMzZfd2VicA==" style="display: inline;">TRX</span>
            <br>
            <span class="coinName_zh">波场</span></a>
        </div>
      </td>
      <td _id="sz" _data="9934593403">
        <div class="table_cell" style="text-align: right;">
          <span class="">99.35亿</span></div>
      </td>
      <td _id="dj" _data="0.1386">
        <div class="table_cell" style="text-align: right;">
          <span class="">0.1386</span></div>
      </td>
      <td _id="bf" _data="4.51">
        <div class="table_cell" style="text-align: right;">
          <span class="textGreen">+4.51%</span></div>
      </td>
    </tr>
    <tr class="item">
      <td>
        <div class="table_cell" style="text-align: center;">
          <span class="tableNum">17</span></div>
      </td>
      <td>
        <div class="table_cell">
          <a href="javascript:;" title="火币积分">
            <span class="coinName">
              <img class="lazyload" data-original="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9odC5wbmc/eC1vc3MtcHJvY2Vzcz1zdHlsZS9jb2luXzM2X3dlYnA=" alt="" src="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9odC5wbmc/eC1vc3MtcHJvY2Vzcz1zdHlsZS9jb2luXzM2X3dlYnA=" style="display: inline;">HT</span>
            <br>
            <span class="coinName_zh">火币积分</span></a>
        </div>
      </td>
      <td _id="sz" _data="7004670533">
        <div class="table_cell" style="text-align: right;">
          <span class="">70.05亿</span></div>
      </td>
      <td _id="dj" _data="31.0305">
        <div class="table_cell" style="text-align: right;">
          <span class="">31.0305</span></div>
      </td>
      <td _id="bf" _data="1.44">
        <div class="table_cell" style="text-align: right;">
          <span class="textGreen">+1.44%</span></div>
      </td>
    </tr>
    <tr class="item">
      <td>
        <div class="table_cell" style="text-align: center;">
          <span class="tableNum">18</span></div>
      </td>
      <td>
        <div class="table_cell">
          <a href="javascript:;" title="唯链">
            <span class="coinName">
              <img class="lazyload" data-original="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS92ZWNoYWluY29tLnBuZz94LW9zcy1wcm9jZXNzPXN0eWxlL2NvaW5fMzZfd2VicA==" alt="" src="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS92ZWNoYWluY29tLnBuZz94LW9zcy1wcm9jZXNzPXN0eWxlL2NvaW5fMzZfd2VicA==" style="display: inline;">VET</span>
            <br>
            <span class="coinName_zh">唯链</span></a>
        </div>
      </td>
      <td _id="sz" _data="6584038917">
        <div class="table_cell" style="text-align: right;">
          <span class="">65.84亿</span></div>
      </td>
      <td _id="dj" _data="0.1187">
        <div class="table_cell" style="text-align: right;">
          <span class="">0.1187</span></div>
      </td>
      <td _id="bf" _data="0.01">
        <div class="table_cell" style="text-align: right;">
          <span class="textGreen">+0.01%</span></div>
      </td>
    </tr>
    <tr class="item">
      <td>
        <div class="table_cell" style="text-align: center;">
          <span class="tableNum">19</span></div>
      </td>
      <td>
        <div class="table_cell">
          <a href="javascript:;" title="以太经典">
            <span class="coinName">
              <img class="lazyload" data-original="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9ldGhlcmV1bS1jbGFzc2ljLnBuZz94LW9zcy1wcm9jZXNzPXN0eWxlL2NvaW5fMzZfd2VicA==" alt="" src="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9ldGhlcmV1bS1jbGFzc2ljLnBuZz94LW9zcy1wcm9jZXNzPXN0eWxlL2NvaW5fMzZfd2VicA==" style="display: inline;">ETC</span>
            <br>
            <span class="coinName_zh">以太经典</span></a>
        </div>
      </td>
      <td _id="sz" _data="6078588945">
        <div class="table_cell" style="text-align: right;">
          <span class="">60.79亿</span></div>
      </td>
      <td _id="dj" _data="52.2602">
        <div class="table_cell" style="text-align: right;">
          <span class="">52.2602</span></div>
      </td>
      <td _id="bf" _data="2.83">
        <div class="table_cell" style="text-align: right;">
          <span class="textGreen">+2.83%</span></div>
      </td>
    </tr>
    <tr class="item">
      <td>
        <div class="table_cell" style="text-align: center;">
          <span class="tableNum">20</span></div>
      </td>
      <td>
        <div class="table_cell">
          <a href="javascript:;" title="Neo">
            <span class="coinName">
              <img class="lazyload" data-original="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9uZW9fMzYud2VicD92PTk4" alt="" src="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9uZW9fMzYud2VicD92PTk4" style="display: inline;">NEO</span>
            <br>
            <span class="coinName_zh">Neo</span></a>
        </div>
      </td>
      <td _id="sz" _data="6040830527">
        <div class="table_cell" style="text-align: right;">
          <span class="">60.41亿</span></div>
      </td>
      <td _id="dj" _data="85.638">
        <div class="table_cell" style="text-align: right;">
          <span class="">85.638</span></div>
      </td>
      <td _id="bf" _data="5.39">
        <div class="table_cell" style="text-align: right;">
          <span class="textGreen">+5.39%</span></div>
      </td>
    </tr>
    <tr class="item">
      <td>
        <div class="table_cell" style="text-align: center;">
          <span class="tableNum">21</span></div>
      </td>
      <td>
        <div class="table_cell">
          <a href="javascript:;" title="埃欧塔">
            <span class="coinName">
              <img class="lazyload" data-original="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9pb3RhLnBuZz94LW9zcy1wcm9jZXNzPXN0eWxlL2NvaW5fMzZfd2VicA==" alt="" src="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9pb3RhLnBuZz94LW9zcy1wcm9jZXNzPXN0eWxlL2NvaW5fMzZfd2VicA==" style="display: inline;">IOTA</span>
            <br>
            <span class="coinName_zh">埃欧塔</span></a>
        </div>
      </td>
      <td _id="sz" _data="5858779558">
        <div class="table_cell" style="text-align: right;">
          <span class="">58.59亿</span></div>
      </td>
      <td _id="dj" _data="2.1072">
        <div class="table_cell" style="text-align: right;">
          <span class="">2.1072</span></div>
      </td>
      <td _id="bf" _data="2.66">
        <div class="table_cell" style="text-align: right;">
          <span class="textGreen">+2.66%</span></div>
      </td>
    </tr>
    <tr class="item">
      <td>
        <div class="table_cell" style="text-align: center;">
          <span class="tableNum">22</span></div>
      </td>
      <td>
        <div class="table_cell">
          <a href="javascript:;" title="达世币">
            <span class="coinName">
              <img class="lazyload" data-original="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9kYXNoLnBuZz94LW9zcy1wcm9jZXNzPXN0eWxlL2NvaW5fMzZfd2VicA==" alt="" src="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9kYXNoLnBuZz94LW9zcy1wcm9jZXNzPXN0eWxlL2NvaW5fMzZfd2VicA==" style="display: inline;">DASH</span>
            <br>
            <span class="coinName_zh">达世币</span></a>
        </div>
      </td>
      <td _id="sz" _data="5655574013">
        <div class="table_cell" style="text-align: right;">
          <span class="">56.56亿</span></div>
      </td>
      <td _id="dj" _data="588.22">
        <div class="table_cell" style="text-align: right;">
          <span class="">588.22</span></div>
      </td>
      <td _id="bf" _data="4.92">
        <div class="table_cell" style="text-align: right;">
          <span class="textGreen">+4.92%</span></div>
      </td>
    </tr>
    <tr class="item">
      <td>
        <div class="table_cell" style="text-align: center;">
          <span class="tableNum">23</span></div>
      </td>
      <td>
        <div class="table_cell">
          <a href="javascript:;" title="阿童木">
            <span class="coinName">
              <img class="lazyload" data-original="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9jb3Ntb3MucG5nP3gtb3NzLXByb2Nlc3M9c3R5bGUvY29pbl8zNl93ZWJw" alt="" src="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9jb3Ntb3MucG5nP3gtb3NzLXByb2Nlc3M9c3R5bGUvY29pbl8zNl93ZWJw" style="display: inline;">ATOM</span>
            <br>
            <span class="coinName_zh">阿童木</span></a>
        </div>
      </td>
      <td _id="sz" _data="5363556163">
        <div class="table_cell" style="text-align: right;">
          <span class="">53.64亿</span></div>
      </td>
      <td _id="dj" _data="28.1267">
        <div class="table_cell" style="text-align: right;">
          <span class="">28.1267</span></div>
      </td>
      <td _id="bf" _data="6.45">
        <div class="table_cell" style="text-align: right;">
          <span class="textGreen">+6.45%</span></div>
      </td>
    </tr>
    <tr class="item">
      <td>
        <div class="table_cell" style="text-align: center;">
          <span class="tableNum">24</span></div>
      </td>
      <td>
        <div class="table_cell">
          <a href="javascript:;" title="大零币">
            <span class="coinName">
              <img class="lazyload" data-original="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS96Y2FzaC5wbmc/eC1vc3MtcHJvY2Vzcz1zdHlsZS9jb2luXzM2X3dlYnA=" alt="" src="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS96Y2FzaC5wbmc/eC1vc3MtcHJvY2Vzcz1zdHlsZS9jb2luXzM2X3dlYnA=" style="display: inline;">ZEC</span>
            <br>
            <span class="coinName_zh">大零币</span></a>
        </div>
      </td>
      <td _id="sz" _data="4876764768">
        <div class="table_cell" style="text-align: right;">
          <span class="">48.77亿</span></div>
      </td>
      <td _id="dj" _data="545.5">
        <div class="table_cell" style="text-align: right;">
          <span class="">545.5</span></div>
      </td>
      <td _id="bf" _data="10.58">
        <div class="table_cell" style="text-align: right;">
          <span class="textGreen">+10.58%</span></div>
      </td>
    </tr>
    <tr class="item">
      <td>
        <div class="table_cell" style="text-align: center;">
          <span class="tableNum">25</span></div>
      </td>
      <td>
        <div class="table_cell">
          <a href="javascript:;" title="Maker">
            <span class="coinName">
              <img class="lazyload" data-original="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9tYWtlci5wbmc/eC1vc3MtcHJvY2Vzcz1zdHlsZS9jb2luXzM2X3dlYnA=" alt="" src="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9tYWtlci5wbmc/eC1vc3MtcHJvY2Vzcz1zdHlsZS9jb2luXzM2X3dlYnA=" style="display: inline;">MKR</span>
            <br>
            <span class="coinName_zh">Maker</span></a>
        </div>
      </td>
      <td _id="sz" _data="3854124055">
        <div class="table_cell" style="text-align: right;">
          <span class="">38.54亿</span></div>
      </td>
      <td _id="dj" _data="3854.07">
        <div class="table_cell" style="text-align: right;">
          <span class="">3854.07</span></div>
      </td>
      <td _id="bf" _data="0.71">
        <div class="table_cell" style="text-align: right;">
          <span class="textGreen">+0.71%</span></div>
      </td>
    </tr>
    <tr class="item">
      <td>
        <div class="table_cell" style="text-align: center;">
          <span class="tableNum">26</span></div>
      </td>
      <td>
        <div class="table_cell">
          <a href="javascript:;" title="新经币">
            <span class="coinName">
              <img class="lazyload" data-original="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9uZW0ucG5nP3gtb3NzLXByb2Nlc3M9c3R5bGUvY29pbl8zNl93ZWJw" alt="" src="/?m=ffm&a=get_icon&u=aHR0cHM6Ly9zMi5icWlhcHAuY29tL2xvZ28vMS9uZW0ucG5nP3gtb3NzLXByb2Nlc3M9c3R5bGUvY29pbl8zNl93ZWJw" style="display: inline;">XEM</span>
            <br>
            <span class="coinName_zh">新经币</span></a>
        </div>
      </td>
      <td _id="sz" _data="3375835345">
        <div class="table_cell" style="text-align: right;">
          <span class="">33.76亿</span></div>
      </td>
      <td _id="dj" _data="0.375">
        <div class="table_cell" style="text-align: right;">
          <span class="">0.375</span></div>
      </td>
      <td _id="bf" _data="5.27">
        <div class="table_cell" style="text-align: right;">
          <span class="textGreen">+5.27%</span></div>&am      
                                      
               
                                       

           
1.JQ代码


[JavaScript] 纯文本查看 复制代码
<script src="https://taothe.com/static/js/jquery-1.7.2.js" type="text/javascript"></script>
<script>
var tb=$(".data-table tbody").find("tr.item");
$("table.data-table thead tr th[_index="+2+"]").click(function(){
SortTb($(this).attr("_index"), "asc" ,tb);
});
$("table.data-table thead tr th[_index="+3+"]").click(function(){
SortTb($(this).attr("_index"), "asc" ,tb);
});

function swapRow(i, k ,tb) {
    $(tb).eq(k).insertBefore($(tb).eq(i));
    $(tb).eq(i).insertAfter($(tb).eq(k))
}

function SortTb(col, order ,tb) {
    var total = tb.length;
    for (var i = 0; i < total; i++) {
        for (var j = i; j < total; j++) {
            var v = parseFloat($(tb).eq(i).find("td").eq(col).attr("_data"));//此处用_data这个参数是因为价格经过格式化后以“万、百万”为单位后,取文本内容就不是原始值了
            var v2 = parseFloat($(tb).eq(j).find("td").eq(col).attr("_data"));//此处用_data这个参数是因为价格经过格式化后以“万、百万”为单位后,取文本内容就不是原始值了
            if (order == "asc") {
                if (v < v2) {
                    swapRow(i, j ,tb);
                    tb = $(".data-table tbody").find("tr.item")
                }
            }else {
             if (v > v2) {
                    swapRow(i, j ,tb);
                    tb = $(".data-table tbody").find("tr.item") //此处是必须的,没有定义一项,排序会出现问题
                }
            }
        }
    }
    $("img.lazyload").lazyload();
  return;
}
</script>

免费评分

参与人数 1吾爱币 +5 热心值 +1 收起 理由
苏紫方璇 + 5 + 1 欢迎分析讨论交流,吾爱破解论坛有你更精彩!

查看全部评分

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

偶尔平凡 发表于 2020-8-1 13:46
前端感觉比后端难学多了。
 楼主| since347860 发表于 2020-8-1 13:50
林伊轩 发表于 2020-8-1 16:09
zpy2 发表于 2020-8-1 16:15
没反应,是不是少个lazyload?
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则 警告:本版块禁止灌水或回复与主题无关内容,违者重罚!

快速回复 收藏帖子 返回列表 搜索

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2020-8-14 17:00

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表