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

Question

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

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

另一个例子：现在假设我点击了“ken”的用户名。 单击该按钮后，排行榜仅显示用户名“ken”和播放“ken”的服务器。

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

排行榜图片：图片

我的脚本：

    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>

快乐编码！