html - Change table td using javascript -
i new javascript take easy on me. want change data inside table using javascript. have looked everywhere suitable tutorial haven't found any. 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 , 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 run code gives me following error,
{ "message": "uncaught typeerror: table.getelementbytagname not function", "filename": "http://stacksnippets.net/js", "lineno": 96, "colno": 15 }
i have changed getelementbytagname
getelementsbytagname
still giving me error, wrong code , can fix it. find jsfiddle here
this 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 first tr
has no td
, th
in , forgot "s"
in "getelementsbytagname"
.
because "tag"
can more 1 element need add "s" , when it's id
makes sense 1 item therefor no "s" needed.
Comments
Post a Comment