檢查並設置錶行的可見性

我有一個有幾行的表，其中每行變得可見，如果它上面的行中的字段不爲空。我寫了一個工作腳本，但我是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>

來源

2012-04-22 jk1844

你是否試圖用純js做到這一點？ – ocanal 2012-04-22 23:08:01

你可以從一個函數開始，獲取元素函數elm（id）{return document.getElementById（id）}' – ajax333221 2012-04-22 23:24:18

@ jk1844-不要將錶行設置爲「block」，它們的默認*顯示*值是[table - 行（http://www.w3.org/TR/CSS2/sample.html）。在「none」和「」（空字符串）之間切換，以便元素採用默認值或其他設置。 – RobG 2012-04-22 23:40:19

是的，它可以很容易地縮短...

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

這可能有更好的解決方案，但我們需要更多的信息。

來源

2012-04-22 23:14:05

+1我喜歡jqueryless jquery的答案，特別是當有人對JS陌生時。（我認爲當jQuery不知道JS的基礎知識時，jquery做的更有害無益） – ajax333221 2012-04-22 23:28:06

@ ajax333221：同意。 – 2012-04-22 23:29:27

不要將表格行設置爲「阻止」，其默認*顯示*值爲[表格行]（http://www.w3.org/TR/CSS2/sample.html）。在「none」和「」（空字符串）之間切換，以便元素採用默認值或其他設置。 – RobG 2012-04-22 23:38:50

我覺得jquery可以幫你做這樣的事情，將您排類類= 「行」

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

，那麼你的代碼看起來是這樣的：

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

來源

2012-04-22 23:06:32

我對此完全陌生...有沒有一個例子，你可以在jsfiddle.net中爲我做些什麼。很多appriciated – jk1844 2012-04-22 23:19:48

這不等於問題中的代碼。我沒有看到OP使用jQuery。 – 2012-04-22 23:20:23

檢查並設置錶行的可見性

回答

相關問題