2017-02-04 7 views
0

Ich habe diese JavaScript-Funktion, die eine Spalte aus einer Tabelle auszublenden:Javascript-Funktion funktioniert nur Debuggen

function hideColumn (name) { 
    column = $("#taula-thead td:contains("+name+")")[0].cellIndex; 
    $("#taula-thead td:contains("+name+")").hide(); 
    $("#taula-tbody td:nth-child("+(column+1)+")").hide(); 
} 

Also, wenn die Seite zu laden, eine andere Funktion einige Cookies lesen, um zu sehen, welche Spalten verstecken sollte und ruft diese Funktion für jede dieser Spalten. Aber die Funktion versteckt nur den thead Teil.

Ich debugge es und ... der Code funktioniert, wenn ich es debuggen bin. Also ich dachte vielleicht das Problem wäre, dass es zu schnell oder zu etwas ausgeführt wird und die Funktion in ein setTimeout setzt. Aber es ist auch gescheitert. Schließlich versuchte ich es so zu schreiben: $("#taula-thead td:contains("+name+")").hide() && $("#taula-tbody td:nth-child("+(column+1)+")").hide(); aber ... es scheitert auch.

Also ... Ich kann den Code nicht debuggen, weil es mit dem Debug funktioniert und ich bin nicht einmal sicher, was das Problem sein könnte.

aktualisieren

finde ich das Problem, aber keine gute Lösung. Ich führe diese Funktion direkt nach einer anderen Funktion aus, die viele Zeilen einfügt. Wenn javascript dies ausführt, werden die Zeilen noch nicht erkannt, so dass nur der thead-Teil ausgeblendet wird.

Wenn ich die Funktion innerhalb einer SetTimeout mit 50ms Verzögerung, funktioniert es. Wenn es 30ms hat, funktioniert es manchmal. Wenn es 10ms hat, funktioniert es nie. Ich suche einen Weg, um herauszufinden, wann die neuen Zeilen richtig eingestellt sind und führe diese Funktion dann aus.

Antwort

0

Sie sollten Anführungszeichen hinzufügen. Also das:

column = $("#taula-thead td:contains(" + name + ")")[0].cellIndex; 

Eigentlich funktioniert Ihr Code funktioniert der Schnipsel unten. Wenn es ein Problem gibt, ist es im Rest Ihres Codes, den Sie nicht gepostet haben.

Arbeits Snippet:

function hideColumn(name) { 
 
    column = $("#taula-thead td:contains(" + name + ")")[0].cellIndex; 
 
    $("#taula-thead td:contains(" + name + ")").hide(); 
 
    $("#taula-tbody td:nth-child(" + (column + 1) + ")").hide(); 
 
}
table { 
 
    border-collapse: collapse; 
 
} 
 
td { 
 
    border: 1px solid black; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>Click on a column to hide it</p> 
 
<table> 
 
    <thead id="taula-thead"> 
 
    <tr> 
 
     <td onclick='hideColumn("ID")'>ID</td> 
 
     <td onclick='hideColumn("name")'>name</td> 
 
     <td onclick='hideColumn("some other column")'>some other column</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody id='taula-tbody'> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

+0

Gerade versucht, nicht funktioniert – Aleksandr

+0

@Aleksandr Beitrag einige HTML-Code! –

+0

@Aleksandr Sehen Sie sich das obige Snippet an, Ihr Code funktioniert einwandfrei! –

Verwandte Themen