Vérifier et régler la visibilité des lignes de la table

J'ai une table avec quelques lignes, dans lequel chaque ligne devient visible que si le champ dans la ligne ci-dessus, il n'est pas vide. J'ai écrit un travail de script, mais je suis nouveau sur le Javascript et se sentir comme il est trop impliqué. En d'autres termes, est-il un meilleur, plus concis solution à ce problème? J'aurais besoin d'effectuer la même solution dans plusieurs endroits, donc une meilleure solution serait la bienvenue. 

<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>
  • êtes-vous essayer de le faire avec seulement pur js?
  • vous pouvez commencer par faire une fonction pour obtenir les éléments function elm(id){return document.getElementById(id)}
  • pas l'ensemble des lignes de la table pour "bloquer", leur affichage par défaut la valeur est table-row. Basculer entre "rien" et "" (chaîne vide) si l'élément ne sera adopter par défaut ou tout ce qui a été défini autrement.
InformationsquelleAutor jk1844 | 2012-04-22
  1. 5

    Oui, il peut facilement être raccourcie...

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

    Il y a probablement une bien meilleure solution que cela, mais nous aurions besoin de plus d'informations.

    • +1 je préfère jqueryless réponses sur jquery ceux, spécialement lorsque quelqu'un est nouveau pour JS. (Je pense que jquery faire plus de mal que de bien quand on ne connais pas les bases du JS)
    • D'accord.
    • Ne définissez pas de lignes de table de "bloc", par défaut de affichage la valeur est table-row. Basculer entre "rien" et "" (chaîne vide) si l'élément ne sera adopter par défaut ou tout ce qui a été défini autrement.
    • Vous avez raison. Mis à jour.
    InformationsquelleAutor
  2. 0

    Je pense que jquery peut vous aider à faire quelque chose comme ça, définissez votre ligne de la classe à l'class="row"

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

    alors vous code ressemble à ceci:

    var showRow = true;
$(".row").each(function(index){
if (!showRow) {
$(this).css("display", "none");
}
if ($this.find(".dataItem").val() == "") {
showRow = false;
}
});
    • je suis totalement nouveau sur ce... est-il un exemple, vous pourriez bien vouloir le faire pour moi dans jsfiddle.net. beaucoup appriciated
    • Ce n'est pas l'équivalent du code en question. Et je ne vois pas que l'OP est à l'aide de jQuery.
    InformationsquelleAutor Charlie Wu