访问 HTML 表格单元格并更改值

Question

我需要访问 HTML 表格的单元格并更改其值。 我试过的方法没有奏效。 也参考截图。

不能使用下面的方法，因为在某些情况下有多个具有相同的值。 我需要访问特定标记的单元格。

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

单元格需要访问和更改金额

 <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>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table>

通过 ID 访问并更改值不起作用。

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

Answer 1

您的 javascript 代码有效，请确保在页面加载后运行您的脚本。 这是使用按钮的示例：

<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>john@example.com</td>
      </tr>
      <tr>
         <td>Mary</td>
         <td>Moe</td>
         <td>mary@example.com</td>
      </tr>
      <tr>
         <td>July</td>
         <td>Dooley</td>
         <td>july@example.com</td>
      </tr>
      <tr>
         <td>July</td>
         <td>Dooley</td>
         <td>july@example.com</td>
      </tr>
      <tr>
         <td>July</td>
         <td>Dooley</td>
         <td>july@example.com</td>
      </tr>
   </tbody>
</table>
<button onclick="changeme()">Change</button>
<script>
  function changeme(){
    document.getElementById("ValueOne").innerHTML = 'New Value';    
  }
</script>

Answer 2

由于您好心地向我们提供了身份证件。 只需使用：

Javascript：

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

查询：

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

演示： https : //jsfiddle.net/fme8v6oa/

选项：

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

Answer 3

使用 jquery ：

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

 });

其中 mytable 是您表的 ID

演示： https : //jsfiddle.net/xLz6f49h/4/

Answer 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">john@example.com</td>
        </tr>
        <tr>
          <td id="Value3">Mary</td>
          <td id="Value4">Moe</td>
          <td id="Value5">mary@example.com</td>
        </tr>
        <tr>
          <td id="Value6">July</td>
          <td id="Value7">Dooley</td>
          <td id="Value8">july@example.com</td>
        </tr>
        <tr>
          <td id="Value9">July</td>
          <td id="Value10">Dooley</td>
          <td id="Value11">july@example.com</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</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>

访问 HTML 表格单元格并更改值

问题描述

4 个解决方案

解决方案1
1 2020-01-14 13:31:02

解决方案2
1 已采纳 2020-01-14 13:31:56

解决方案3
1 2020-01-14 13:36:35

解决方案4
0 2020-01-14 13:52:59

访问 HTML 表格单元格并更改值

问题描述

4 个解决方案

解决方案1 1 2020-01-14 13:31:02

解决方案2 1 已采纳 2020-01-14 13:31:56

解决方案3 1 2020-01-14 13:36:35

解决方案4 0 2020-01-14 13:52:59

解决方案1
1 2020-01-14 13:31:02

解决方案2
1 已采纳 2020-01-14 13:31:56

解决方案3
1 2020-01-14 13:36:35

解决方案4
0 2020-01-14 13:52:59