Javascript 用表格单元格值填充表格_Javascript_Html_Asp.net

Javascript 用表格单元格值填充表格

javascript html asp.net

Javascript 用表格单元格值填充表格,javascript,html,asp.net,Javascript,Html,Asp.net,有没有办法用Javascript操作HTML表当事件触发自动填充时，我需要从中提取一个值。我无法使用超过的值，无法使用表格中的USD值自动填写表格，也无法根据另一个称为“支付”的表格列完成完成所需的值我尝试使用Id来实现这一点，但这会造成很大的混乱，因为我找不到一种方法使用不同的Id来使用与我的另一个Id相等的getElementbyId（）。如果有方法，请指向我。我正在使用ASP.NETMVC环境。我认为使用局部变量来实现这一点可能更容易，尽管我对如何操作HTML数据表有些迷茫有人能告诉

有没有办法用Javascript操作HTML表

当事件触发自动填充时，我需要从

中提取一个值。我无法使用超过

的值，无法使用表格中的USD值自动填写表格，也无法根据另一个称为“支付”的表格列完成完成所需的值

我尝试使用Id来实现这一点，但这会造成很大的混乱，因为我找不到一种方法使用不同的Id来使用与我的另一个Id相等的getElementbyId（）。如果有方法，请指向我。我正在使用ASP.NETMVC环境。我认为使用局部变量来实现这一点可能更容易，尽管我对如何操作HTML数据表有些迷茫

有人能告诉我怎么做吗

<!DOCTYPE html>
<html>
<body>



<p>You have payed $7000 USD</p>  <!-- Decrease (1000-2000-1000) -->

<table>
    <thead>
      <th>id</th>
      <th>USD</th>
      <th>Paid</th>
      <th>form</th>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>$1000</td>
        <td>$0</td>
        <td> <input type="number"</td>  <!-- 1000 here -->
      </tr>
      <tr>
        <td>2</td>
        <td>$2000</td>
        <td>$0</td>
        <td> <input type="number"</td>  <!-- 2000 here -->
      </tr>
      <tr>
        <td>3</td>
        <td>$3000</td>
        <td>$2000</td>
        <td> <input type="number"</td> <!-- 1000 only here -->
      </tr>   
    </tbody>

</table>

<button id="myBtn">Autofill</button>  <!-- On click fill inputs and decrease <p> value -->

<script>
document.getElementById("myBtn").addEventListener("click", function() {
  alert("You have autofilled the table");
});
</script>
</body>
</html>


您已支付7000美元
身份证件
美元
支付
形式
1.
$1000
$0
首先，您需要使用>关闭文本输入标记。未关闭的标签会以奇怪的方式与其他标签合并
您可以通过ID以外的方式获取标记组。您可以使用标记和类，而无需修改HTML，您可以在函数中使用：
document.getElementById("myBtn").addEventListener("click", 
function() {
let rows = document.getElementsByTagName("tr");
let i;
let owed = 0;
for (i = 1; i < rows.length; i++) {
    let amount = rows[i].children[1].innerHTML.replace("$","") * 1;
    owed += amount;
    let paid = rows[i].children[2].innerHTML.replace("$","") * 1;
    let formField = rows[i].children[3].children[0];
    formField.value = (amount - paid);
    owed -= paid;
}
document.getElementsByTagName("p")[0].innerHTML = "You have payed $" + owed + " USD";

});

document.getElementById（“myBtn”）.addEventListener（“单击”，
函数（）{
让rows=document.getElementsByTagName（“tr”）；
让我；
设负=0；
对于（i=1；i

我发布这篇文章只是为了展示如何在不修改HTML的情况下完成它。相反，我会向表或每行添加一个类，并至少使用document.getElementsByClassName，以避免在页面上引入其他随机TR标记。此代码假设您的页面上没有任何其他TR（这不是一个好的假设），并且表格布局从未更改。
如果您是使用ASP.NET生成此代码，请提供相关代码，而不仅仅是呈现的HTML输出。或者，你只是在问如何使用纯JavaScript操作HTML？它实际上是一个静态表，页面中没有更多的TRs，这只是我正在构建的演示网站的布局，基本上就像HTML/CSS/JS中的powerpoint演示文稿，我会尝试一下这个脚本谢谢你的回答，先生，我会回来把我得到的发出去