I am new to Javascript so take it easy on me. I want to change data inside a table using javascript. I have looked everywhere for a suitable tutorial but I haven't found any. This is my code.
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>I am new to Javascript so take it easy on me. I want to change data inside a table using javascript. I have looked everywhere for a suitable tutorial but I haven't found any. This is my code.
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>When I run the code it gives me the following error,
{
"message": "Uncaught TypeError: table.getElementByTagName is not a function",
"filename": "http://stacksnippets/js",
"lineno": 96,
"colno": 15
}
I have changed the getElementByTagName to getElementsByTagName but it is still giving me an error, What is wrong with my code and what can I do to fix it. Find my jsfiddle here
-
2
it's
getElementsByTagName()you are missing an s – Ted Commented Sep 22, 2016 at 12:20 - Remember you have tr even in thead so change the row to table.getElementByTagName("table > tr")[1] because the row can be found but data will be undefined since there are no td's in th(from thead). – Dinca Adrian Commented Sep 22, 2016 at 12:21
3 Answers
Reset to default 2This works:
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";
}
You selected the first tr that has no td , only th in it and you also forgot "s" in "getElementsByTagName".
Because with "Tag" you can get more then 1 element you need to add "s" , when it's by ID it makes sense that you will get only 1 item therefor no "s" is needed.
You're missing an s in your last line of Code.
Also, data already contains the element you want to edit, so there's no need to call getElementsByTagName on data.
Change this Line
data.getElementByTagName("td")[0].innerHTML = "Julius"
To
data.innerHTML = "Julius";
This should suffice.
function trans() {
var table = document.getElementById("table"),
tr = table.getElementsByTagName('tr')[2],
td = tr.getElementsByTagName('td')[0];
td.innerHTML = "Julius";
}
Issues:
- In order to select a certain key "[2]" you need to use
.getElementsByTagNameinstead of.getElementsByTagName; - You're targeting the wrong tr. There are tr's in the table head. So even with fixing the number 1 issue, you would not get the correct result.