I need to access the cell of an HTML Table and change Its value. The method I tried didn't worked out. Refer the screenshot as well.

Cannot use the following method, since there were multiple with same value in some cases. I need to access the specific marked cell.

$('td:contains("1200")').text('....');

Cell need to access and Change the amount

<table class="table table-striped">
  <thead>
    <tr>
      <th>Loan amount</th>
      <th>New loan installment amount (first installment)</th>
      <th>DSCR (both new and existing)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="ValueOne">LKR 12000</td>
      <td>Doe</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>

I need to access the cell of an HTML Table and change Its value. The method I tried didn't worked out. Refer the screenshot as well.

Cannot use the following method, since there were multiple with same value in some cases. I need to access the specific marked cell.

$('td:contains("1200")').text('....');

Cell need to access and Change the amount

<table class="table table-striped">
  <thead>
    <tr>
      <th>Loan amount</th>
      <th>New loan installment amount (first installment)</th>
      <th>DSCR (both new and existing)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="ValueOne">LKR 12000</td>
      <td>Doe</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>

Accessing by ID And changing the value didn't worked.

document.getElementById("ValueOne").innerHTML = 'New Value';

• javascript
• jquery
• html

• 1 Accessing by ID should work, check: jsfiddle/20f1jun8 – ToTheMax Commented Jan 14, 2020 at 13:28
• 1 If you have an ID then $("#ValueOne").text("new value"); if you want the first cell on the first row you can use tbody>tr:first>td:first – fdomn-m Commented Jan 14, 2020 at 13:29
• Thanks some how, after clearing chrome browser cache , the it worked.. Thanks a lot. – cs-87 Commented Jan 14, 2020 at 13:31

4 Answers 4

Since you kindly provided us with an ID. Simply use:

Javascript:

document.getElementById("ValueOne").innerHTML = "LKR 100"

JQuery:

$("#ValueOne").text("LKR 100")

Demo: https://jsfiddle/fme8v6oa/

Options:

document.getElementsByTagName("td")[0].innerHTML = "LKR 100"

Your javascript code works, make sure to run your script after the page is loaded. Here is an example using a button:

<table class="table table-striped">
   <thead>
      <tr>
         <th>Loan amount</th>
         <th>New loan installment amount (first installment)</th>
         <th>DSCR (both new and existing)</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td id="ValueOne">LKR 12000</td>
         <td>Doe</td>
         <td>[email protected]</td>
      </tr>
      <tr>
         <td>Mary</td>
         <td>Moe</td>
         <td>[email protected]</td>
      </tr>
      <tr>
         <td>July</td>
         <td>Dooley</td>
         <td>[email protected]</td>
      </tr>
      <tr>
         <td>July</td>
         <td>Dooley</td>
         <td>[email protected]</td>
      </tr>
      <tr>
         <td>July</td>
         <td>Dooley</td>
         <td>[email protected]</td>
      </tr>
   </tbody>
</table>
<button onclick="changeme()">Change</button>
<script>
  function changeme(){
    document.getElementById("ValueOne").innerHTML = 'New Value';    
  }
</script>

Using jquery :

$('#mytable tr').each(function() {
    $(this).find("#ValueOne").html("new value");    

 });

where mytable is the Id of your table

Demo : https://jsfiddle/xLz6f49h/4/

   <html>
    <body>
      <table class="table table-striped">
      <thead>
        <tr>
          <th>Loan amount</th>
          <th>New loan installment amount (first installment)</th>
          <th>DSCR (both new and existing)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td id="Value1">LKR 12000</td>
          <td id="Value2">Doe</td>
          <td id="Value2">[email protected]</td>
        </tr>
        <tr>
          <td id="Value3">Mary</td>
          <td id="Value4">Moe</td>
          <td id="Value5">[email protected]</td>
        </tr>
        <tr>
          <td id="Value6">July</td>
          <td id="Value7">Dooley</td>
          <td id="Value8">[email protected]</td>
        </tr>
        <tr>
          <td id="Value9">July</td>
          <td id="Value10">Dooley</td>
          <td id="Value11">[email protected]</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>[email protected]</td>
        </tr>
      </tbody>
    </table>
      CELL id:  <input type="text" name="celliD" id="input1"><br><br>
      New CELL Value:  <input type="text" name="celliD" id="input2"><br>
      <button onclick="changeCellValue()">Change Value</button>
    <script>
    function changeCellValue(){
      var inputVal = document.getElementById('input1').value; 
      var newVal = document.getElementById('input2').value; 
      if(inputVal == null || inputVal == "" && newVal == null || newVal == ""){
        alert("value is required");
      } else {
        var changeVal = document.getElementById(inputVal).innerHTML = newVal;  
      }
    }
    </script>
    <body>
      </html>