如何检查表格行样式。display = "表格行"

Question

我有代码排序表行和值tableowsum

我想收集tablerowSUM= "display: table-row"在console.log中显示所有In outside function

和valuetableowsum在我的代码中它没有定义

这是我所有的代码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，它现在是函数的一个属性。