javascript - Check and set the visibility of table rows

I have a table with a few rows, in which each row bees 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 wele.

<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>

<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>

Share edited Mar 31, 2018 at 13:30 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Apr 22, 2012 at 22:59 jk1844 3271 gold badge5 silver badges13 bronze badges

are you trying to do this with only pure js? – Okan Kocyigit Commented Apr 22, 2012 at 23:08
you can start by making a function to get elements function elm(id){return document.getElementById(id)} – ajax333221 Commented Apr 22, 2012 at 23:24
@jk1844—Do not set table rows to "block", their default display value is table-row. Toggle between "none" and "" (empty string) so the element will adopt it's default or whatever has been set otherwise. – RobG Commented Apr 22, 2012 at 23:40

Add a ment |

2 Answers 2

Sorted by: Reset to default 5

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.

I think jquery can help you do something like that, set your row class to 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;
    }
});

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Check and set the visibility of table rows - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)