Ändern Sie die Tabelle td mit Javascript

Ich bin neu in Javascript also nimm es einfach auf mich. Ich möchte Daten in einer Tabelle mit Javascript ändern. Ich habe überall nach einem passenden Tutorial gesucht, aber ich habe keines gefunden. Das ist mein Code.Ändern Sie die Tabelle td mit 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>

Wenn ich den Code ausführen es mir die folgende Fehlermeldung gibt,

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

ich die getElementByTagName zu getElementsByTagName geändert haben, aber es ist nach wie vor mir einen Fehler geben, Was ist falsch mit meinem Code und was kann ich tun, um es zu beheben. Find my jsfiddle here

Quelle

2016-09-22 AntonyMN

es 'getElementsByTagName()' Sie eine ** s fehlen ** – Ted

Denken Sie daran, auch in thead haben tr so die Zeile table.getElementByTagName ändern ("table> tr") [1], da die Zeile kann gefunden werden, aber die Daten werden undefiniert sein, da es keine Tds in th (von thead) gibt. –

Sie vermissen eine s in Ihrer letzten Zeile des Codes.

Außerdem enthalten Daten bereits das Element, das Sie bearbeiten möchten. Daher müssen Sie nicht getElementsByTagName für Daten aufrufen.

Ändern Sie diese Zeile

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

data.innerHTML = "Julius";

Quelle

2016-09-22 12:20:56

Dies funktioniert: Code snippet
Try this:

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

    td.innerHTML = "Julius"; 
}

ausgewählt Sie die erste tr, die keinehat, nur th drin und du hast auch "s" in "getElementsByTagName" vergessen.

Da mit "Tag" können Sie mehr als 1 Element erhalten, die Sie "s" hinzufügen müssen, wenn es durch ID ist, macht es Sinn, dass Sie nur 1 Element dafür erhalten keine "s" benötigt wird.

Quelle

2016-09-22 12:22:52

Dies sollte ausreichen.

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

     td.innerHTML = "Julius"; 
}

Probleme:

Um eine bestimmte Taste, um "[2]" Sie müssen .getElementsByTagName verwenden, anstatt .getElementsByTagName;
Sie zielen auf das falsche tr. Es gibt trs im Tabellenkopf. Selbst wenn Sie das Problem Nummer 1 beheben, erhalten Sie nicht das richtige Ergebnis.

Quelle

2016-09-22 12:40:10 Mihailo

nein würde es nicht. Bitte erkläre, was das Problem war und was du geändert hast. – Ted

Das Problem, wie bereits zuvor erwähnt, war, dass 'getElementByTagName' mit' getElementsByTagName' geändert werden muss, aus dem wir einen bestimmten Schlüssel auswählen könnten (** [2] **), wenn dies behoben ist, muss es funktionieren Ist einfach. Ich habe es getestet und es funktioniert 100%. – Mihailo

Ist der Awsner jetzt besser? @Ted – Mihailo

Ändern Sie die Tabelle td mit Javascript

Antwort

Verwandte Themen