如何检查 table 行 style.display = "table-row"

Question

我有排序 table 行和值 tablerowSUM

的代码

问题我想收集tablerowSUM = "display: table-row" in console.log 并显示全部在外部函数中

和值 tablerowSUM 在我的代码中未定义

这是我所有的代码Fiddle：http://jsfiddle.net/0s1uafgw/5/

// =================================== Filter ======================================

var tablerowSUM; 

function filter(event, filterCol) {
  let element = event.target;
  let condt1 = document.getElementsByClassName(filterCol);
  for (let i = 0; i < condt1.length; i++) {
    if (condt1[i].innerHTML.toLowerCase() == element.value.toLowerCase()) {
      if (element.checked == true) {
         condt1[i].parentElement.closest('tr').style = "display:table-row"
         
        tablerowSUM = condt1[i].parentElement.closest('tr');
         
      } else {
         condt1[i].parentElement.closest('tr').style = "display:none"
      }
    }
  }
}

console.log(tablerowSUM)

document.querySelectorAll('.option1')
  .forEach(input => input.addEventListener('input', ()=>filter(event,"check1")));

<div id="input">
  <label>Filter Name </label><br>
  <label>Human<input class="option1" type="checkbox" value="Human" checked/></label>
</div>


<table id="listingTable">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td class="check1">Human</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td class="check1">Robot</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td class="check1">Robot</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td class="check1">Robot</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td class="check1">Human</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td class="check1">Human</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

抱歉我的英语不好，无法解释所有我需要的，希望你能理解我的需要

谢谢！

Answer 1

您不能在函数内修改变量 tablerowSUM，这会产生副作用。

像这样使用函数属性

if (element.checked == true) {
     condt1[i].parentElement.closest('tr').style = "display:table-row"
     
    filter.tablerowSUM = condt1[i].parentElement.closest('tr');

并像这样在函数外访问它

console.log(filter.tablerowSUM)

您不需要在任何地方声明 tablerowSUM，它现在是函数的属性。

如何检查 table 行 style.display = "table-row"

How to Check table row style.display = "table-row"

html

javascript

html-table