Schaltfläche in Reihe auf bestimmten Wert einer Spalte ausblenden

Question

Ich habe eine automatisch generierte Tabelle mit Aufgaben und deren Status. Jede Zeile verfügt über eine Schaltfläche zum Neustarten der Aufgabe.

Ich möchte die Neustart-Schaltfläche ausblenden, wenn der Wert der Aufgabe nicht gleich "Error" ist. Also mit anderen Worten: nur die Aufgaben mit Status==Error sollten eine sichtbare Restart-Taste

hier ist eine Geige Link: https://jsfiddle.net/hwqt7c3a/5/

ich versucht habe:

window.onload = function() { 
      $(function() { 
       $('table tr').each(function() { 
        var Cells = this.getElementsByTagName("td"); 
        if (Cells[2].innerText !== 'Error') { 
         $(this).find('button').style.visibility = 'hidden'; 
        } 
       }); 
      }); 
     } 

aber aus irgendeinem Grunde Cells ist immer leer .

Answer 1

Ich habe Ihre Geige aktualisiert, hier ist die working fiddle

$(function() {        //document ready event 
    $('table tr').each(function() {   //loop all tr's 
    var Cell = $(this).find('td:eq(2)'); //find the 3rd td cell 
    if (Cell.text() !== 'Error') {   //check if its text is "Error" 
     $(this).find('button').hide();  //if try then find the button of this tr and hide it   
    } 
    }); 
}); 

---

Sie Javascript und JQuery Syntax nicht mischen,

Auch brauchen Sie nicht diese beiden Linien

window.onload = function() { // javascript way of handling document ready 
      $(function() { // jquery way of handling document ready. 

Verwenden Sie eines, da Sie verwenden JQuery Bibliothek dann ist es besser Sie verwenden

$(function() { 

Damit Sie die Syntaxen mischen nicht ..

---

, wenn Sie die td wollen die Schaltfläche Raum in der Benutzeroberfläche zu nehmen, aber immer noch dann ausgeblendet werden Sie haben

$(this).find('button').css("visibility","none") 

Answer 2

;(function($){ 
$(document).ready(function(){ 
    $('table tr').each(function() { 
    if ($(this).find("td").eq(2).text() !== 'Error') { 
    $(this).find('button').css("visibility","none") 
    } 
    }); 
}) 
})(jQuery) 

Ps benutzen Sie bereits jQuery verwenden, so würde ich es nicht mit Vanille-js empfehlen zu mischen. Versuche dies.

Answer 3

Ändern Sie das Skript wie folgt. Es hat einige kleine Änderungen in Ihrem Skript zur Fehlerbehandlung.

<script> 
    window.onload = function() { 
     $(function() { 
      $('table tr').each(function() { 
       var Cells = this.getElementsByTagName("td"); 
       if (Cells != undefined && Cells.length > 0 && Cells[2].innerText !== 'Error') { 
        $(this).find('button').attr("style", "visibility: hidden"); 
       } 
      }); 
     }); 
    } 
</script> 

Answer 4

können Sie den :nth-child Selektor der Wert zu überprüfen, ist === Error und dann an das erste Kind zu gehen und auf die Schaltfläche mit empty() Funktion

-Code entfernen:

$(document).ready(function() { 
 
    
 
    $('table tr').each(function() { 
 
    
 
    if($(this).children(':nth-child(3)').text() === 'Error'){ 
 
    \t $(this).children(':nth-child(1)').empty(); 
 
    } 
 
    
 
\t }); \t 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border='1'> 
 
    <thead> 
 
    <th></th> 
 
    <th>ID</th> 
 
    <th>Status</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="grid-row "> 
 
     <td class="grid-cell" data-name=""> 
 
     <button type="submit">Restart</button> 
 
     </td> 
 
     <td class="grid-cell" data-name="job_id">2349</td> 
 
     <td class="grid-cell" data-name="JobStatusName">Completed</td> 
 
    </tr> 
 
    <tr class="grid-row "> 
 
     <td class="grid-cell" data-name=""> 
 
     <button type="submit">Restart</button> 
 
     </td> 
 
     <td class="grid-cell" data-name="job_id">6585</td> 
 
     <td class="grid-cell" data-name="JobStatusName">Error</td> 
 
    </tr> 
 
    <tr class="grid-row "> 
 
     <td class="grid-cell" data-name=""> 
 
     <button type="submit">Restart</button> 
 
     </td> 
 
     <td class="grid-cell" data-name="job_id">4564</td> 
 
     <td class="grid-cell" data-name="JobStatusName">Processing</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 5

Prüfen Sie dies Fiddle

Sie brauchen nicht window.onLoad() mit jquery

zu mischen und es gibt Argument für $.each(function(i, e){}); Ihnen die Iterieren html element

EDIT gibt:

$(function() { 
    $('table tbody tr').each(function(i, e) { 
    var status = $(e).find("td:eq(2)").html(); 
    if (status !== 'Error') { 
     $(e).find('button').hide(); 
    } 
    }); 
});