访问 HTML 表格单元格并更改值
[英]Accessing HTML Table cell and Change the value
问题描述
I need to access the cell of an HTML Table and change Its value.
我需要访问 HTML 表格的单元格并更改其值。 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>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>
Accessing by ID And changing the value didn't worked.通过 ID 访问并更改值不起作用。
document.getElementById("ValueOne").innerHTML = 'New Value';
4 个解决方案
解决方案1
1 2020-01-14 13:31:02
Your javascript code works, make sure to run your script after the page is loaded.您的 javascript 代码有效，请确保在页面加载后运行您的脚本。 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>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>
解决方案2
1 已采纳 2020-01-14 13:31:56
Since you kindly provided us with an ID.由于您好心地向我们提供了身份证件。 Simply use:只需使用：
Javascript: Javascript：
document.getElementById("ValueOne").innerHTML = "LKR 100"
JQuery:查询：
$("#ValueOne").text("LKR 100")
Demo: https://jsfiddle.net/fme8v6oa/
Options:选项：
document.getElementsByTagName("td")[0].innerHTML = "LKR 100"
解决方案3
1 2020-01-14 13:36:35
Using jquery :使用 jquery ：
$('#mytable tr').each(function() {
$(this).find("#ValueOne").html("new value");
});
where mytable is the Id of your table其中 mytable 是您表的 ID
Demo : https://jsfiddle.net/xLz6f49h/4/
解决方案4
0 2020-01-14 13:52:59
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.