如何使用 jQuery 在表格行单击时过滤表格中的数据？

Question

我的站点中有一张桌子，上面有玩家姓名和服务器。但我需要它们是可点击的，并且需要具有过滤效果。

我的意思是，如果你点击玩家姓名 => 排行榜将像往常一样再次加载并显示服务器玩家玩.. 和服务器名称 => 排行榜将像往常一样再次加载并显示在服务器上玩的玩家

另一个示例： 现在假设我点击“用户名”肯”。点击后，排行榜只显示用户名“ken”和播放“ken”的服务器。

注意：表中的数据是从外部 JSON 文件中获取的， https://dayz-n-chill.herokuapp.com/getglobal

排行榜图片：image

我的脚本：

    function responseHandler(res) {
                res.forEach(function (row, i) {
                row.index = i + 1
                })
                return res
                }
    
                function ajaxRequest(params) {
                var url = 'https://dayz-n-chill.herokuapp.com/getglobal'
                jQuery.get(url, jQuery.param(params.data)).then(function (res) {
                params.success(res);
                console.log(res);
// this is what i tried so far
                 var x = $("td").text();
                    $("td").click(function () {
                        var rows = $("#tableBody").find("tr").hide();
                        rows.filter(":contains('$(this).text()')").show();
                       })
                    })
                 }
//

我的 HTML 代码：

<table class="table table-bordered table-hover" data-toggle="table" data-search="true" data-ajax="ajaxRequest"
            data-pagination="true" data-height="700" data-response-handler="responseHandler" data-toolbar="#toolbar">

            <thead class="thead-dark">
                <tr>
                    <th scope="col" data-field="index" data-sortable="true">Rank</th>
                    <th scope="col" data-field="userName" data-sortable="true" id="user_name">Username</th>
                    <th scope="col" data-field="serverName" data-sortable="true">Server Name</th>
                    <th scope="col" data-field="Kills" data-sortable="true">Kills</th>
                    <th scope="col" data-field="Deaths" data-sortable="true">Deaths</th>
                    <th scope="col" data-field="headshot" data-sortable="true">Headshots</th>
                    <th scope="col" data-field="killStreak" data-sortable="true">Kill Streak</th>
                </tr>
            </thead>
            <tbody id="tableBody">
            </tbody>
        </table>

Answer 1

如果我理解你的话，这就是你要找的东西：

jsonData = [
{"id":10615,"userName":"RareCanadian295","Kills":2900,"Deaths":989,"headshot":557,"killStreak":0,"serverName":"DZNC_L"},
{"id":10655,"userName":"thildas","Kills":2030,"Deaths":1222,"headshot":422,"killStreak":5,"serverName":"ArmedToTheTeeth"},
{"id":12408,"userName":"Hells-Angelmc","Kills":1297,"Deaths":701,"headshot":308,"killStreak":0,"serverName":"420HighlootDM"},
{"id":103647,"userName":"thildas","Kills":1141,"Deaths":489,"headshot":202,"killStreak":0,"serverName":"420HighlootDM"},
{"id":11142,"userName":"YunG_Legend420","Kills":1101,"Deaths":964,"headshot":171,"killStreak":7,"serverName":"DZNC_L"},
{"id":10613,"userName":"Hells-Angelmc","Kills":807,"Deaths":621,"headshot":105,"killStreak":0,"serverName":"ArmedToTheTeeth"},
{"id":68686,"userName":"XxDGKallDAY3xX","Kills":690,"Deaths":413,"headshot":110,"killStreak":3,"serverName":"NWAFBattleground"},
{"id":10621,"userName":"thildas","Kills":643,"Deaths":527,"headshot":129,"killStreak":5,"serverName":"DZNC_L"},
{"id":11513,"userName":"Hells-Angelmc","Kills":630,"Deaths":515,"headshot":140,"killStreak":0,"serverName":"420HighlootDM"},
{"id":10642,"userName":"rha84","Kills":583,"Deaths":476,"headshot":80,"killStreak":0,"serverName":"ArmedToTheTeeth"}];

fillTable(jsonData);

$("#tblPlayers").on("click", ".js-data", function() {
    
    var type = $(this).data("type");
    var value = $(this).data("value");
    
    filterData(type, value);
});

function resetFilter() {
    fillTable(jsonData);
}

function filterData(type, value) {
     
   var newJson = "";
   
   if(type == "userName") {
       newJson = jsonData.filter(function (el) {
          return el.userName == value;
         });
   }
   else if(type == "serverName") {
       newJson = jsonData.filter(function (el) {
          return el.serverName == value;
         });
   }
   
   //console.log(newJson);
   fillTable(newJson);
}

function fillTable(data) {
   
   var html = '';
   
   $("#tblPlayers tbody").empty();
   
   for(var item of data) {
       html += '<tr>' +
       '<td>' + item.id + '</td>' +
       '<td><a href="#" class="js-data" data-type="userName" data-value=' + item.userName + '>' + item.userName + '</a></td>' +
       '<td><a href="#" class="js-data" data-type="serverName" data-value=' + item.serverName + ' >' + item.serverName + '</a></td>' +
       '<td>' + item.Kills + '</td>' +
       '<td>' + item.Deaths + '</td>' +
       '<td>' + item.headshot + '</td>' +
       '<td>' + item.killStreak + '</td>' +
       '</tr>';
   }
   
   $("#tblPlayers tbody").append(html);
}

a {
  font-weight: bold;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button onClick="resetFilter()">Reset Filter</button>
<br><br>
<table id="tblPlayers" class="table table-bordered table-hover" data-toggle="table" data-search="true" data-ajax="ajaxRequest" data-pagination="true" data-height="700" data-response-handler="responseHandler" data-toolbar="#toolbar">
  <thead class="thead-dark">
    <tr>
      <th scope="col" data-field="index" data-sortable="true">Rank</th>
      <th scope="col" data-field="userName" data-sortable="true" id="user_name">Username</th>
      <th scope="col" data-field="serverName" data-sortable="true">Server Name</th>
      <th scope="col" data-field="Kills" data-sortable="true">Kills</th>
      <th scope="col" data-field="Deaths" data-sortable="true">Deaths</th>
      <th scope="col" data-field="headshot" data-sortable="true">Headshots</th>
      <th scope="col" data-field="killStreak" data-sortable="true">Kill Streak</th>
    </tr>
  </thead>
  <tbody id="tableBody">
  </tbody>
</table>