javascript - 为一列选择值后过滤 HTML 表

Question

我试图在为第一列选择一个值后过滤 HTML 表格行。它有效，但它还会搜索第二列中的值:

$('.platform_filter').keyup(function(){
 var val=$(this).val();    
        $('table tbody tr').hide();
         var trs=$('table tbody tr').filter(function(d){
         return $(this).text().toLowerCase().indexOf(val)!=-1;
         });
         console.log(trs);
         trs.show();   
});

@import url('https://fonts.googleapis.com/css?family=Roboto');

body { 
    margin: 0;
    color:#fff;
    font-family: Roboto; }
.row {
    display: table;
    width: 100%;
    height: 241px; 
    background-color:#454545;
}
.row > .col-lg-6 {
    display: table-cell;
    vertical-align: middle;
}
.container {
  /*display: flex;*/
  flex-wrap: wrap;
}
.container > div {
  padding: 15px;
  margin: 5px;
  flex: 0 0 calc(100% - 20px);
  text-align: left;
}

/*img {
    padding-left: 7%;
    max-height:55px;
    width:auto;
}*/
td{
  padding: 2px 2px;
  text-align: center;
  margin: 6px 0;
  border: none;
}
table{
  width: 100%;
  background-color:#454545;
  font-weight:500;
  border-collapse: separate;
  border-spacing:0.3em 1.1em;
  color: #fff;
  border: 0;
}
tr{
    font-size: 1.5em;
    text-transform:capitalize;
}
th {
    color: #CCC;
    font-size: 0.8em;
 	}
	
#one,#two,#three,#four{
    padding-top:2%;
 	}
#platform {
    background-image: url('/css/searchicon.png'); /* Add a search icon to input */
    background-position: 10px 12px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    padding: 2px 2px;
    text-align: center;
    margin: 6px 0;
    border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table>
    <thead>
       <tr><input type="text" class="platform_filter"/><th>Num Heading</th></tr>
        </thead>
    <tbody>
       <tr><td>ABC</td><td>1</td></tr>
       <tr><td>DEF</td><td>2</td></tr>
       <tr><td>ABC</td><td>3</td></tr>
       <tr><td>apolo</td><td>4</td></tr>
   </tbody>
</table>

如果我实现了这一点，我想用下拉菜单替换输入。我尝试了以下但没有成功:

$('.filter').change(function () {
    var values = [];

     $('.filter').each(function () {
        var colIdx = $(this).data('col');

         $(this).find('option:selected').each(function () {
             if ($(this).val() != "") values.push( {
                text: $(this).text(),
                colId : colIdx
             });
        });
    });
    
    filter('table > tbody > tr > td', values);
});

function filter(selector, values) { 
    $(selector).each(function () {
        var sel = $(this);
        var tokens = sel.text().trim().split('\n');
        var toknesObj = [], i;
        for(i=0;i<tokens.length;i++){
            toknesObj[i] = {
               text:tokens[i].trim(), 
               found:false
            };
        }

        var show = false;
        $.each(values, function (i, val) {                

       if (toknesObj[val.colId].text.search(new RegExp("\\b"+val.text+"\\b")) >= 0) {
     
           toknesObj[val].found = true;
          }

        });          
        console.log(tokens);
        var count = 0;
         $.each(toknesObj, function (i, val) {
             if (val.found){
                 count+=1;
             }
         });
        show = (count === values.length);        
        show ? sel.show() : sel.hide();
    });
};

@import url('https://fonts.googleapis.com/css?family=Roboto');

body { 
    margin: 0;
    color:#fff;
    font-family: Roboto; }
.row {
    display: table;
    width: 100%;
    height: 241px; 
    background-color:#454545;
}
.row > .col-lg-6 {
    display: table-cell;
    vertical-align: middle;
}
.container {
  /*display: flex;*/
  flex-wrap: wrap;
}
.container > div {
  padding: 15px;
  margin: 5px;
  flex: 0 0 calc(100% - 20px);
  text-align: left;
}

/*img {
    padding-left: 7%;
    max-height:55px;
    width:auto;
}*/
td{
  padding: 2px 2px;
  text-align: center;
  margin: 6px 0;
  border: none;
}
table{
  width: 100%;
  background-color:#454545;
  font-weight:500;
  border-collapse: separate;
  border-spacing:0.3em 1.1em;
  color: #fff;
  border: 0;
}
tr{
    font-size: 1.5em;
    text-transform:capitalize;
}
th {
    color: #CCC;
    font-size: 0.8em;
 	}
	
#one,#two,#three,#four{
    padding-top:2%;
 	}
#platform {
    background-image: url('/css/searchicon.png'); /* Add a search icon to input */
    background-position: 10px 12px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    padding: 2px 2px;
    text-align: center;
    margin: 6px 0;
    border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.1.js"></script>

<div id="one"><div class="row"><div class="col-lg-6" style="background-color: #e90649; width: 117px;">&nbsp;</div><div class="col-lg-6" style="max-width: 100px; padding-left: 10px; font-size: 2vw;">Objc1<br><br></div><div class="col-lg-6"><div class="container"><select class="filter" data-col="0"><option value="">None</option><option value="a">plat1</option><option value="b">plat2</option></select><table><thead><tr><th>Platform</th><th>Channel</th><th>Objective</th><th>Num1</th><th>Num2</th></tr></thead><tbody><tr><td>plat1</td><td>chan1</td><td>Objc1</td><td>40</td><td>34</td></tr><tr><td>plat2</td><td>chan1</td><td>Objc1</td><td>26</td><td>22</td></tr></tbody></table></div></div></div></div>

脚本运行良好(应用过滤器但仅适用于第一列 --> 我希望在对第一列中的值进行过滤后显示整行)。最初有效的脚本是:

   if (toknesObj[val.colId].text.search(new RegExp("\\b"+val.text+"\\b")) >= 0) {

       toknesObj[val.colId].found = true;
      }

我把它改成:

   if (toknesObj[val.colId].text.search(new RegExp("\\b"+val.text+"\\b")) >= 0) {

       toknesObj[val].found = true;
      }

Answer 1

我建议更改此行:

filter('table > tbody > tr > td', values);

到:

filter('table > tbody > tr', values);

因此，您的过滤函数可以简化为:

function filter(selector, values) {
    $(selector).each(function () {
        var sel = $(this);
        var txt = sel.find('td:eq(0)').text().trim();
        var hwMatches = values.filter(function(ele, idx) {
            return ele.text == txt;
        }).length;
        sel.toggle(hwMatches > 0 || values.length == 0);
    });
};

$('.filter').change(function () {
    var values = [];

    $('.filter').each(function () {
        var colIdx = $(this).data('col');

        $(this).find('option:selected').each(function () {
            if ($(this).val() != "") values.push({
                text: $(this).text(),
                colId: colIdx
            });
        });
    });

    filter('table > tbody > tr', values);
});

function filter(selector, values) {
    $(selector).each(function () {
        var sel = $(this);
        var txt = sel.find('td:eq(0)').text().trim();
        var hwMatches = values.filter(function(ele, idx) {
            return ele.text == txt;
        }).length;
        sel.toggle(hwMatches > 0 || values.length == 0);
    });
};

@import url('https://fonts.googleapis.com/css?family=Roboto');

body {
    margin: 0;
    color: #fff;
    font-family: Roboto;
}

.row {
    display: table;
    width: 100%;
    height: 241px;
    background-color: #454545;
}

.row > .col-lg-6 {
    display: table-cell;
    vertical-align: middle;
}

.container {
    /*display: flex;*/
    flex-wrap: wrap;
}

.container > div {
    padding: 15px;
    margin: 5px;
    flex: 0 0 calc(100% - 20px);
    text-align: left;
}

/*img {
    padding-left: 7%;
    max-height:55px;
    width:auto;
}*/
td {
    padding: 2px 2px;
    text-align: center;
    margin: 6px 0;
    border: none;
}

table {
    width: 100%;
    background-color: #454545;
    font-weight: 500;
    border-collapse: separate;
    border-spacing: 0.3em 1.1em;
    color: #fff;
    border: 0;
}

tr {
    font-size: 1.5em;
    text-transform: capitalize;
}

th {
    color: #CCC;
    font-size: 0.8em;
}

#one, #two, #three, #four {
    padding-top: 2%;
}

#platform {
    background-image: url('/css/searchicon.png'); /* Add a search icon to input */
    background-position: 10px 12px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    padding: 2px 2px;
    text-align: center;
    margin: 6px 0;
    border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one">
    <div class="row">
        <div class="col-lg-6" style="background-color: #e90649; width: 117px;">&nbsp;</div>
        <div class="col-lg-6" style="max-width: 100px; padding-left: 10px; font-size: 2vw;">Objc1<br><br></div>
        <div class="col-lg-6">
            <div class="container">
                <select class="filter" data-col="0" multiple>
                    <option value="">None</option>
                    <option value="a">plat1</option>
                    <option value="b">plat2</option>
                </select>
                <table>
                    <thead>
                    <tr>
                        <th>Platform</th>
                        <th>Channel</th>
                        <th>Objective</th>
                        <th>Num1</th>
                        <th>Num2</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>plat1</td>
                        <td>chan1</td>
                        <td>Objc1</td>
                        <td>40</td>
                        <td>34</td>
                    </tr>
                    <tr>
                        <td>plat2</td>
                        <td>chan1</td>
                        <td>Objc1</td>
                        <td>26</td>
                        <td>22</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>