javascript 检查并设置表格行的可见性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10272895/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Check and set the visibility of table rows
提问by jk1844
I have a table with a few rows, in which each row becomes visible if the field in the row above it is not blank. I have written a working script, but I am new to Javascript and feel like it is too involved. In other words, is there a better, more concise solution to this problem? I would need to perform the same solution in several locations, so a better solution would be very welcome.
我有一个包含几行的表格，如果上面一行中的字段不为空，则其中每一行都可见。我已经写了一个工作脚本，但我是 Javascript 的新手，觉得它太复杂了。换句话说，有没有更好、更简洁的解决方案来解决这个问题？我需要在多个位置执行相同的解决方案，因此非常欢迎更好的解决方案。
<script language="javascript">
function MyTableRow(){
//Row 1
if(document.getElementById("DQ23I1010").value=="")
{
//alert("test");
document.getElementById("myRow1").style.display='none';
}
else
{
document.getElementById("myRow1").style.display='block';
}
//Row 2
if(document.getElementById("DQ24I1011").value=="")
{
document.getElementById("myRow2").style.display='none';
}
else
{
document.getElementById("myRow2").style.display='block';
}
//Row 3
if(document.getElementById("DQ25I1012").value=="")
{
document.getElementById("myRow3").style.display='none';
}
else
{
document.getElementById("myRow3").style.display='block';
}
//Row 4
if(document.getElementById("DQ26I1013").value=="")
{
document.getElementById("myRow4").style.display='none';
}
else
{
document.getElementById("myRow4").style.display='block';
}
//Row 5
if(document.getElementById("DQ27I1014").value=="")
{
document.getElementById("myRow5").style.display='none';
}
else
{
document.getElementById("myRow5").style.display='block';
}
//Row 6
if(document.getElementById("DQ28I1015").value=="")
{
document.getElementById("myRow6").style.display='none';
}
else
{
document.getElementById("myRow6").style.display='block';
}
//Row 7
if(document.getElementById("DQ29I1016").value=="")
{
document.getElementById("myRow7").style.display='none';
}
else
{
document.getElementById("myRow7").style.display='block';
}
//Row 8
if(document.getElementById("DQ30I1017").value=="")
{
document.getElementById("myRow8").style.display='none';
}
else
{
document.getElementById("myRow8").style.display='block';
}
//Row 9
if(document.getElementById("DQ31I1018").value=="")
{
document.getElementById("myRow9").style.display='none';
}
else
{
document.getElementById("myRow9").style.display='block';
}
//Row 10
if(document.getElementById("DQ32I1019").value=="")
{
document.getElementById("myRow10").style.display='none';
}
else
{
document.getElementById("myRow10").style.display='block';
}
}
</script>
回答by
Yes, it can easily be shortened...
是的，它可以很容易地缩短...
function MyTableRow() {
for (var i = 1; i <= 10; i++) {
var row = document.getElementById("myRow" + i);
if (document.getElementById("DQ" + (22 + i) + "I10" + (i + 9)).value == "")
row.style.display = 'none';
else
row.style.display = '';
}
}
There's probably an even better solution that this, but we'd need more information.
可能有一个更好的解决方案，但我们需要更多信息。
回答by Charlie Wu
I think jquerycan help you do something like that, set your row class to class="row"
我认为jquery可以帮助你做这样的事情，将你的行类设置为 class="row"
<table>
<tr class="row">
<td></td>
</tr>
<tr class="row">
<td></td>
</tr>
</table>
then you code looks something like this:
然后你的代码看起来像这样：
var showRow = true;
$(".row").each(function(index){
if (!showRow) {
$(this).css("display", "none");
}
if ($this.find(".dataItem").val() == "") {
showRow = false;
}
});
