如何检查表格行 style.display = "table-row"答案

【问题标题】：How to Check table row style.display = "table-row"如何检查表格行 style.display = "table-row"
【发布时间】：2021-08-06 20:05:36
【问题描述】：

我有代码来排序表格行和值tablerowSUM

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

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

这是我所有的代码小提琴：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>

对不起，我的英语不好，无法解释我需要什么，希望你明白我需要什么

谢谢！

【问题讨论】：

console.log(tablerowSUM) 必须在filter(event,"check1") 之后

标签： javascript html html-table

【解决方案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，它现在是函数的一个属性。

【讨论】：