Ex No: 5 UPDATE CELL CONTENT
Aim: To write a JavaScript code to update cell content of a table by using row and column values.
Algorithm
Step1: Create a folder “Ex5” to place the HTML files.
Step2: Create HTML file “index.html”.
Step3: Use document.getElementById method to get the table object.
Step4: Use rows, cells and innerHTML property of the table object to update the cell content.
Step5: Use JavaScirpt promtp to get the value to be updated.
Source Code
Try It

index.html


<!DOCTYPE html>
<html>
   <head>
      <title>Update Cell Content</title>   
   <style>
     header {
      text-align:center;
      height: 100px;
      background-color: lime;
      padding: 10px;
      border-radius: 10px 10px 0px 0px;
     }
     footer {
      text-align:center;
      font-size: 12px;
      height: 50px;
      line-height: 50px;
      background-color: lime;
      padding: 10px;
      margin-top: 20px;
      border-radius: 10px;
     }
     article{
      width: auto;
      padding: 10px;
      margin:5px;
      overflow-x: auto;
     }
     table, td, th{
      border: 1px solid;
      border-collapse: collapse;
     }
   </style>
   <script type="text/javascript">
   function GetMark(trow)
   {  
      let mark;
      mark = prompt("Enter Mark: ");
      if(mark != null && (mark>=0 && mark<=100))
      {
         document.getElementById("markTable").rows[trow].cells[2].innerHTML=mark;
      }
   }
   </script>
   </head>
   <body>      
      <header>
         <h1>Mark Sheet</h1>
      </header>   
      <hr>
      <table id="markTable">
        <tr>
         <th colspan=3>Department of Web Designing, III Sem Mark Sheet</td>
        </tr>
        <tr>
         <th>S. No</th>
         <th>Subject</th>
         <th>Mark</th>
        </tr>
        <tr>
         <td>1</td>
         <td onclick="GetMark(2)">Web Fundamentals</td>
         <td></td>
        </tr>
        <tr>
         <td>2</td>
         <td onclick="GetMark(3)">OS and DS</td>
         <td></td>
        </tr>
        <tr>
         <td>3</td>
         <td onclick="GetMark(4)">Python Programming</td>
         <td></td>
        </tr>
        <tr>
         <td>4</td>
         <td onclick="GetMark(5)">Web Designing Practical</td>
         <td></td>
        </tr>
        <tr>
         <td>5</td>
         <td onclick="GetMark(6)">Linux Practical</td>
         <td></td>
        </tr>
        <tr>
         <td>6</td>
         <td onclick="GetMark(7)">Python Programming and Data Structures Practical</td>
         <td></td>
        </tr>
        <tr>
         <td>7</td>
         <td onclick="GetMark(8)">E Publishing Practical</td>
         <td></td>
        </tr>
      </table>
      <footer>
         Developed by K Anbarasan
      </footer>
   </body>
</html>
Result: Thus JavaScript code is written to update the cell content using row and column values.