单击第一个表时,对第二个表进行排序

时间:2019-05-22 09:14:25

标签: jquery tablesorter

单击第一个表的th时,我需要对第二个表进行排序。 单击日期后,应对第二张表进行排序。例如,当单击nov_2013时,应该对整个表格进行排序。代码中有两个表。单击带有日期的表时,应对相应的行进行排序。对于我的代码,它应该像这样http://jsfiddle.net/apougher/17eve62o/

#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
}

#customers td,
#customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even) {
  background-color: #f2f2f2;
}

#customers tr:hover {
  background-color: #ffffff;
}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #428bca;
  ;
  color: white;
}

table {
  table-layout: fixed;
}

td {
  border: 1px solid green;
  overflow: hidden;
}

#myInput {
  background-image: url('searchicon.png');
  background-position: 2px 4px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid white;
}

.myDiv {
  display: none;
}

#showOne {}

#showTwo {}

#showThree {}

#showfour {}
<table style="width:80%" id="customers" align="center">
  <tr>
    <th style="background-color:white;" colspan="2"><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search Here" title="Type in a name"></th>
    <th colspan="7"> Service Matrix Version</th>
  </tr>
  <tr>
    <th colspan="2">
      <select class="ui dropdown" id="myselection" onchange="fgh()">
        <option value="One">Region</option>
        <option value="Two">Country</option>
        <option value="Three">IP_PoP_Status</option>
        <option value="four">PoP_Cat</option>
      </select>
    </th>
    <th>Nov_2013</th>
    <th>March_2014</th>
    <th>Dec_2015</th>
    <th>Nov_2017</th>
    <th>April_2018</th>
    <th>Feb_2019</th>
    <th>April_2019</th>
  </tr>
</table>
<table id="customers">
  <tr>
    <td colspan='2' style='color:red'>Total</td>
    <td>134</td>
    <td>139</td>
    <td>137</td>
    <td>158</td>
    <td>144</td>
    <td>146</td>
    <td>140</td>
  </tr>
  <tr>
    <td colspan='2'>Aadc</td>
    <td>0</td>
    <td>4</td>
    <td>4</td>
    <td>6</td>
    <td>5</td>
    <td>4</td>
    <td>4</td>
  </tr>
  <tr>
    <td colspan='2'>Asdvacific</td>
    <td>48</td>
    <td>45</td>
    <td>33</td>
    <td>36</td>
    <td>33</td>
    <td>34</td>
    <td>33</td>
  </tr>
  <tr>
    <td colspan='2'>Eafcdpe</td>
    <td>45</td>
    <td>42</td>
    <td>46</td>
    <td>53</td>
    <td>48</td>
    <td>52</td>
    <td>50</td>
  </tr>
  <tr>
    <td colspan='2'>Inasdca</td>
    <td>0</td>
    <td>5</td>
    <td>5</td>
    <td>5</td>
    <td>5</td>
    <td>5</td>
    <td>3</td>
  </tr>
  <tr>
    <td colspan='2'>MsCDNA</td>
    <td>4</td>
    <td>5</td>
    <td>5</td>
    <td>5</td>
    <td>5</td>
    <td>6</td>
    <td>6</td>
  </tr>
  <tr>
    <td colspan='2'>NortScerica</td>
    <td>37</td>
    <td>38</td>
    <td>44</td>
    <td>49</td>
    <td>48</td>
    <td>41</td>
    <td>40</td>
  </tr>
  <tr>
    <td colspan='2'>SouacAmerica</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>4</td>
    <td>0</td>
    <td>4</td>
    <td>4</td>
  </tr>
<table>

0 个答案:

没有答案