Changer la table td en utilisant javascript

Je suis nouveau sur Javascript, alors prenez-le doucement sur moi. Je veux changer les données dans une table en utilisant javascript. J'ai cherché partout un tutoriel adapté mais je n'en ai trouvé aucun. C'est mon code.Changer la table td en utilisant javascript

function trans() { 
 
    var table = document.getElementById("table"); 
 
    var row = table.getElementsByTagName("tr")[2]; 
 
    var td = row.getElementsByTagName("td")[0]; 
 

 
    td.innerHTML = "Julius"; 
 
}

**css** 
 
table { 
 
    width: 100%; 
 
    border-collapse: collapse; 
 
    font-family: calibri; 
 
} 
 
tr, 
 
th, 
 
td { 
 
    border: 2px solid black; 
 
    padding: 10px 10px 10px 10px; 
 
} 
 
thead { 
 
    background-color: black; 
 
    color: white; 
 
} 
 
tbody { 
 
    background-color: white; 
 
    color: black; 
 
} 
 
.center { 
 
    text-align: center; 
 
} 
 
.caption { 
 
    text-align: center; 
 
} 
 
button { 
 
    background-color: blue; 
 
    color: white; 
 
    border-radius: 5px; 
 
    height: 25px; 
 
}

<html> 
 

 
<body> 
 
    <table id="table" title="Employment status verses Living Conditions"> 
 
    <caption>Employment status verses Living Conditions</caption> 
 
    <thead> 
 
     <tr> 
 
     <th colspan="3" class="caption">Employment status verses Living Conditions</th> 
 
     </tr> 
 
     <tr> 
 
     <th>Name</th> 
 
     <th>State</th> 
 
     <th>Condition</th> 
 
     </tr> 
 
    </thead> 
 
    <tr> 
 
     <td>Antony</td> 
 
     <td>Employed</td> 
 
     <td>Poor</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Grace</td> 
 
     <td>Student</td> 
 
     <td>Wealthy</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Jane</td> 
 
     <td>Sponsored</td> 
 
     <td>Self actualization</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Christine</td> 
 
     <td colspan="2" class="center"><i>Unknown</i> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td rowspan="2">James and John</td> 
 
     <td>Fishermen</td> 
 
     <td>Spiritual</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Brothers</td> 
 
     <td>Disciples</td> 
 
    </tr> 
 
    </table> 
 
    <button onclick="trans()">Change name</button> 
 
</body> 
 

 
</html>

Quand je lance le code, il me donne l'erreur suivante,

{ 
    "message": "Uncaught TypeError: table.getElementByTagName is not a function", 
    "filename": "http://stacksnippets.net/js", 
    "lineno": 96, 
    "colno": 15 
}

J'ai changé le getElementByTagName à getElementsByTagName, mais il est encore me donner une erreur, Qu'est-ce que mal avec mon code et que puis-je faire pour le réparer. Trouver mon jsfiddle here

Source

2016-09-22 AntonyMN

il est 'getElementsByTagName()' vous manque un s ** ** – Ted

Rappelez-vous tr même dans thead donc changer la ligne à table.getElementByTagName ("table> tr") [1] parce que la ligne peut être trouvé mais les données seront indéfinies car il n'y a pas de td dans le thead. –

Il vous manque un s dans votre dernière ligne de code.

De plus, les données contiennent déjà l'élément que vous souhaitez modifier, il n'est donc pas nécessaire d'appeler getElementsByTagName sur les données.

modifier cette ligne

data.getElementByTagName("td")[0].innerHTML = "Julius"

Pour

data.innerHTML = "Julius";

Source

2016-09-22 12:20:56

Cela fonctionne: Code snippet
Essayez ceci:

function trans() { 
    var table = document.getElementById("table"); 
    var row = table.getElementsByTagName("tr")[2]; 
    var td = row.getElementsByTagName("td")[0]; 

    td.innerHTML = "Julius"; 
}

Vous avez sélectionné la première tr qui n'a pas td, seulement th dedans et vous avez également oublié "s" dans "getElementsByTagName".

Parce que avec "Tag" vous pouvez obtenir plus de 1 élément que vous devez ajouter "s", quand c'est par ID il est logique que vous n'obtiendrez qu'un seul article pour "s" n'est pas nécessaire.

Source

2016-09-22 12:22:52

Ceci devrait suffire.

function trans() { 
    var table = document.getElementById("table"), 
     tr = table.getElementsByTagName('tr')[2], 
     td = tr.getElementsByTagName('td')[0]; 

     td.innerHTML = "Julius"; 
}

Questions:

Pour sélectionner une certaine touche "[2]" vous devez utiliser .getElementsByTagName au lieu de .getElementsByTagName;
Vous ciblez le problème tr. Il y a des tr dans la tête de la table. Donc, même avec la fixation du problème numéro 1, vous n'obtiendrez pas le bon résultat.

Source

2016-09-22 12:40:10 Mihailo

non ce ne serait pas. veuillez expliquer quel était le problème et ce que vous avez changé. – Ted

Le problème, comme d'autres l'ont indiqué précédemment, était que 'getElementByTagName' devait être changé avec' getElementsByTagName' à partir duquel nous pourrions choisir une clé spécifique (** [2] **), Quand cela est résolu, la question de le faire fonctionner est simple. Je l'ai testé et cela fonctionne à 100%. – Mihailo

Est-ce que l'awsner est mieux maintenant? @Ted – Mihailo

Changer la table td en utilisant javascript

Répondre

Questions connexes