ASP.NET MVC - Javascript update table is not working.[Answered] RSS

• • Reply
  amendoza29

  Member

  50 Points

  202 Posts

  ASP.NET MVC - Javascript update table is not working.

  Mar 13, 2017 07:00 AM|amendoza29|LINK

  Good Day Everyone

  I tried to update a cell on my html table using javascript but the codes below is not working.

  document.getElementById("myTable").rows[1].cells.items[2].innerHTML = "John Smith"

  but i'm getting a error. "Unable to get property 'rows' of undefined or null reference."

  Thanks and Regards.

• • Reply
  rajeeshmenot...

  Participant

  1181 Points

  286 Posts

  Re: ASP.NET MVC - Javascript update table is not working.

  Mar 13, 2017 07:07 AM|rajeeshmenoth|LINK

  Hi,

  Please check the following reference :

  https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_table_cells

  Thanks & Regards
  
  RajeeshMenoth [ Rajeesh M R ]
  
  Tech Blog | Twitter | LinkedIn
• • Reply
  XIII

  All-Star

  191722 Points

  20950 Posts

  ASPInsiders

  Moderator

  MVP

  Re: ASP.NET MVC - Javascript update table is not working.

  Mar 13, 2017 07:23 AM|XIII|LINK

  Hi,

  basically all browsers have built in developer tools, better known as the F12 tools.

  If you open the F12 tools and debug document.getElementById("myTable") whiat result do you get? Can you view the source of your page and see if there's a myTable element in the first place?

  Grz, Kris.

  Read my blog | Twitter
  Working with Azure, chatbots, ASP.NET MVC, Web API, EF, MS SQL, ...
  Keep the forums clean: report to the moderation team!
• • Reply
  JiyaoLee

  Member

  600 Points

  262 Posts

  Re: ASP.NET MVC - Javascript update table is not working.

  Mar 14, 2017 06:25 AM|JiyaoLee|LINK

  Hi amendoza29,
  

  amendoza29

  "Unable to get property 'rows' of undefined or null reference."

  I guess it is because of the "document.getElementById("myTable")" is null. 
  You can use F12 to check whether the page has "myTable" element.

  I make a simple demo,

  1. HTML code, the id of the table is "myTable"

  <table class="table" id="table">
      <tr>
          <th>Name</th>
          <th>State</th>
          <th></th>
      </tr>
      <tr>
           <td>Json</td>
           <td>NewYork</td>
           <td><button onclick="changeState(1)">ChangeState</button></td>
      </tr>
      <tr>
           <td>Lee</td>
           <td>NewYork</td>
           <td><button onclick="changeState(2)">ChangeState</button></td>
      </tr>
      <tr>
           <td>Mary</td>
           <td>NewYork</td>
           <td><button onclick="changeState(3)">ChangeState</button></td>
      </tr>
  </table>

  2. add changeState method.

      <script>
          function changeState(index) {
              document.getElementById("table").rows[index].cells[1].innerHTML="Please Select" ;
          }
      </script>

  The following image shows the result,

  

  Hope this will be helpful.

  Best regards,
  JiyaoLee

  We are trying to better understand customer views on social support experience. Click HERE to participate the survey. Thanks!