Question

有没有一种方法可以用Javascript处理HTML表？

当事件触发自动填充时，我需要从<p>中保留一个值。我无法使用超过<p>的值，并且无法自动使用表中的USD值来填写表单，也无法根据另一个称为“已付费”的表列来完成满足要求所需的值。

我尝试使用ID来做到这一点，但是由于我找不到使用不同ID来使用与其他ID相等的getElementbyId（）的方法，因此造成了极大的混乱。如果有办法的话，请指向我。我正在使用ASP.NET MVC环境。我认为使用局部变量执行此操作可能会更容易，尽管我对如何操纵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>

我希望一旦单击按钮即可在它们旁边执行注释，则输出，我正在ASP.NET中查找如何执行此操作，它只是出于测试目的，没有Model或DB数据，就像实际项目的演示，但我需要知道如何执行此操作。

Answer 1

要开始，您需要使用>关闭文本输入标签。像您拥有它们那样未公开，它们将以奇怪的方式与其他标签合并。

您可以通过除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";

});

我将其发布只是为了展示如何在不修改HTML的情况下完成它。我会改为将一个类添加到您的表或每行中，并至少使用document.getElementsByClassName，以避免在页面上引入其他随机TR标记。该代码假定页面上没有任何其他TR（这不是一个很好的假设），并且表格布局不会改变。

用表格单元格值填充表格

1 个答案: