Échec de l'exécution de 'insertBefore' sur 'Node': le paramètre 1 n'est pas de type 'Node'

James Parker

Comment résoudre cette erreur? Qu'est-ce que j'ai fait de mal qui peut avoir causé cela?

Dans la console Chrome, j'obtiens Échec de l'exécution de «insertBefore» sur «Node»: le paramètre 1 n'est pas de type «Node». pour cette ligne de code

rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);

Qui peut être trouvé vers la fin. Je ne sais pas comment corriger cette erreur ou en quoi consiste cette erreur.

console.log("CONNECTED");
var n = 1;
tester(n);

function tester(n){
var switchcount = 0;
var  table = document.getElementById("myTable2");
var monthsArray= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];//0-11    

var switching = true;
// Set the sorting direction to ascending:
var dir = "asc";
// Check the status of each data cell in a table. 
while(switching){
    switching = false;
    var rows = table.rows;      
    var shouldSwitch;

    for (var i = 1; i < (rows.length-1); i++) { 
        var cellsX = rows[i].getElementsByTagName("TD")[n];
        var cellsY = rows[i + 1].getElementsByTagName("TD")[n];
        var dateX = cellsX.textContent.split(" ");
        var dateY = cellsY.textContent.split(" ");
        var mnthX = dateX[0];
        var mnthY = dateY[0];
        var yearX = dateX[1];
        var yearY = dateY[1];
        var totalX = parseInt(monthsArray.indexOf(mnthX)) + parseInt(yearX);
        var totalY = parseInt(monthsArray.indexOf(mnthY)) + parseInt(yearY);

        if(dir === "asc"){
            if(totalX < totalY) {
                //if so, mark as a switch and break the loop:
                shouldSwitch = true;
                break;
            }
        }else if(dir === "desc"){
            if(totalX > totalY){
                shouldSwitch = true;
                break;
            }
        }
    }
    if(shouldSwitch){
        rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
        switching = true;
        switchcount++;
    }else{
        if (switchcount === 0 && dir === "asc") {
            dir = "desc";
            switching = true;
        }

    }
}

}

ma table que je trie par mois et par année.

<table id ="myTable2">
    <thead>
        <tr>
            <th>Client</th>
            <th>Due Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Smith</td>
            <td>Apr 18</td>
        </tr>
        <tr>
            <td>Kelly</td>
            <td>Jan 18</td>
        </tr>
        <tr>
            <td>Park</td>
            <td>Nov 18</td>
        </tr>
        <tr>
            <td>Mark</td>
            <td>July 19</td>
        </tr>
    </tbody>
</table>
NicolasB

Réponse modifiée:

Il n'y a pas rows[i+1]lorsque vous êtes il'index du dernier élément de la ligne. Votre problème est que dans la partie ci-dessus de votre code, se itrouve la valeur qui iavait après la forboucle, qui est la première valeur à laquelle le test de boucle a i < (rows.length-1)échoué. Par conséquent, à ce stade du code, vous devriez toujours avoir i === (rows.length-1), ce qui n'est pas ce que vous voulez.

Un moyen d'éviter ce problème d'utilisation d'une variable de boucle en dehors de la boucle (ce qui est rarement le but et toujours difficile à lire / comprendre / déboguer, etc.) est d'écrire vos boucles avec letau lieu de var, si cela ne vous dérange pas de ne pas prendre en charge les anciennes navigateurs:

for (let i = 1; i < (rows.length-1); i++) {

De cette façon, ine sera pas défini en dehors de votre boucle, et vous aurez une erreur facile à comprendre vous en informant si vous essayez d'utiliser iplus bas votre code à un endroit où cela ne signifie pas n'importe quoi.

Cependant, il y a encore d'autres erreurs dans le code. En particulier, vous ne sortez jamais de votre whileboucle. J'espère que vous pourrez le comprendre par vous-même maintenant que vous savez comment corriger l'erreur que vous avez eue. Mais si je devais trier une table en utilisant du JavaScript brut, je le ferais probablement:

  • Obtenez une liste de toutes les lignes de mon tableau,
  • Triez-les en utilisant la fonction de tri intégrée avec une fonction de comparaison bien choisie,
  • Supprimez toutes les lignes du DOM en utilisant remove ,
  • Ajoutez-les dans le bon ordre en utilisant appendChild dans une forboucle sur le tableau trié.

Ce serait beaucoup plus facile à lire et à déboguer. Ecrire votre propre fonction de tri est un bon exercice, mais si votre objectif est une fonctionnalité Web et ne pas pratiquer l'algorithmique, ne le faites pas.

Articles connexes