テーブルの行の可視性を確認して設定する

Question

テーブルの行数が空白でない場合、各行が表示されるいくつかの行のテーブルがあります。私は作業スクリプトを書いていますが、私は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> 

Answer 1

はい、簡単に短くすることができます...

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 = ''; 
    } 
} 

これはもっと良い解決策かもしれませんが、もっと情報が必要です。

Answer 2

私はクラス=「行」

<table> 
    <tr class="row"> 
     <td></td> 
    </tr> 
    <tr class="row"> 
     <td></td> 
    </tr> 
</table> 

にあなたの行クラスを設定し、jqueryは、あなたがそのような何かを助けることができると思う、あなたはコードは次のようになります。

var showRow = true; 
$(".row").each(function(index){ 
    if (!showRow) { 
     $(this).css("display", "none"); 
    } 
    if ($this.find(".dataItem").val() == "") { 
     showRow = false; 
    } 
});