基于文本输入内的值隐藏表格行

我发现这个网站上的javascript示例隐藏行，它基于直接读取行内单元格内的值，但我需要它读取文本输入字段中的值。基于文本输入内的值隐藏表格行

下面是我使用的JavaScript：

function hide() { 
var tbl = document.getElementById('Table'), 
    rows = tbl.tBodies[0].children, l = rows.length, i, 
    filter = function(cells) { 
     var values = [ 
      parseInt(cells[0].firstChild.nodeValue.replace(/,/g,''),10), 
      parseFloat(cells[1].firstChild.nodeValue.replace(/,/g,'')) 
     ]; 
     if(values[1] < 1) return false; 
     return true; 
    }; 
for(i=0; i<l; i++) { 
    if(!filter(rows[i].cells)) rows[i].style.display = "none"; 
} 
}

这里的HTML：

<tr> 
<tdRow 1</td> 
<td>1<input id="Quantity1" name="Quantity1" class="numericValue" type="text" value="1" /></td> 
</tr> 
<tr> 
<td>Row 2</td> 
<td>2<input id="Quantity2" name="Quantity2" class="numericValue" type="text" value="2" /></td> 
</tr> 
<tr> 
<td>Row 3</td> 
<td>3<input id="Quantity3" name="Quantity3" class="numericValue" type="text" value="0" /></td> 
</tr> 
<tr> 
<td>Row 4</td> 
<td>4<input id="Quantity4" name="Quantity4" class="numericValue" type="text" value="0" /></td> 
</tr> 
<tr> 
<td>Row 5</td> 
<td>0<input id="Quantity5" name="Quantity5" class="numericValue" type="text" value="0" /></td> 
</tr> 

<input id="btnSubmit" onclick="hide();" type="submit" value="Hide" /></p>

原样，js的将是5排读 “0” 和隐藏，但我希望输入值为“0”的行3,4和5被隐藏。我如何获得输入值？这是针对输入值全部从“0”（对于数量）开始的表格，则一个或多个值将被改变。

谢谢。

来源

2013-05-13 Rc Kidd

如果你设置了[的jsfiddle（http://jsfiddle.net/），然后这会更容易看到你想要做什么。 – bmceldowney 2013-05-13 20:59:31

这里是一个jsFiddle--在这个例子中，单击“隐藏”按钮将隐藏第5行，因为它直接在表格单元中有一个“0”。但我希望JavaScript读取文本字段中的“0”并隐藏3,4和5行。[链接] http://jsfiddle.net/rckidd/PPcDx/ – 2013-05-14 11:50:09

只需要改变一行：

parseFloat(cells[1].firstChild.nodeValue.replace(/,/g,''))

成为

parseFloat(cells[1].firstElementChild.value.replace(/,/g,''))

Fiddle

来源

2013-05-14 18:09:04 bmceldowney

完美！谢谢，bmceldowney。 – 2013-05-14 18:41:14

基于文本输入内的值隐藏表格行

回答

相关问题