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

Posted 2023-03-05

【中文标题】如何使用 jQuery 在表格行单击时过滤表格中的数据？

【英文标题】：How can I filter data in a table on table row click using jQuery?

【发布时间】：2020-12-22 19:48:18

【问题描述】：

我的站点中有一张桌子，上面有玩家姓名和服务器。但我需要它们是可点击的，并且需要具有过滤效果。我的意思是，如果你点击玩家姓名 => 排行榜将像往常一样再次加载并显示服务器玩家玩.. 和服务器名称 => 排行榜将像往常一样再次加载并显示在服务器上玩的玩家另一个示例： 现在假设我点击“用户名”肯”。点击后，排行榜只显示用户名“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- 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>

【参考方案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- 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>