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

Popular posts from this blog

angular - Is it possible to get native element for formControl? -

unity3d - Rotate an object to face an opposite direction -

javascript - Why jQuery Select box change event is now working? -