Javascript 编辑HTML表后如何刷新它？

我正在制作一个非常简单的系统来记录预订，除了“预订编号”和“价格”部分是静态的之外，所有内容都是可编辑的。预订数量是预定义的，价格是一个变量，取决于“选择的座位数”列的值。当我打开.html文件时，“price”列总是显示为未定义，我想在相应地编辑“所选座位数”后刷新代码。乘以的价格也是预定义的和静态的，这意味着当选定的座位数确定后，它将乘以5。这是我的密码：

<script type="text/javascript">
var seatvar = document.getElementsByClassName("seatchosen");
var pricepay = seatvar * 5
</script>

<script type="text/javascript">
function RefreshTable () {
            var table = document.getElementById ("bookingtable");
            table.refresh ();
        }
</script>

<table class="editabletable" id="bookingtable" border="1">
<tr><th>Booking Number</th>
<th>Name</th>
<th>Number of Seats Chosen</th>
<th>Seats Chosen</th>
<th>Price</th>
</tr>
<tr><td>1</td>
<td><div contenteditable></div></td>
<td class="seatchosen"><div contenteditable></div></td>
<td><div contenteditable></div></td>
<td><script type="text/javascript">document.write(pricepay);</script></td></tr>
</table>

<p>Price Per Seat: £5</p>
<button onclick="RefreshTable()">Refresh the table</button>

该表仅显示一行，尽管有二十行，但它们都遵循相同的代码。我也包括了标题。我不明白为什么在我编辑了所选座位数的值后，它不刷新。

试试这段代码

在成功函数的位置提供您的id

JS

命令后：

var seatvar = document.getElementsByClassName("seatchosen");

当您尝试在控制台中像这样打印变量seatvar时

console.logseatvar

您将得到结果[object HTMLCollection]，因为您不能反对多个数字，首先是数字*数字

getElementsByClassName返回元素数组。 因此，在var seatvar=document.getelementsbyclassnameseatselect之后； seatvar将不包含全部座位

第二,

点击按钮后，您必须计算价格和座位。 这是在RefreshTable函数中，以便在单击后更新其值

这可能对你有帮助

<script type="text/javascript">
function RefreshTable () {
    for (i = 1; i <= totalRows; i++) {
        var seatvar =  document.getElementsById("seatchosen_1").value;
        var pricepay = seatvar * 5; 
        document.getElementById('price_1').innerHTML = pricepay;
    }

}
</script>

<table class="editabletable" id="bookingtable" border="1">
<tr>
    <th>Booking Number</th>
    <th>Name</th>
    <th>Number of Seats Chosen</th>
    <th>Seats Chosen</th>
    <th>Price</th>
</tr>
<tr>
    <td>1</td>
    <td><div contenteditable></div></td>
    <td class="seatchosen">3 <input type="hidden" name="seatchosen_1" value="3"></td>
    <td><div contenteditable></div></td>
    <td id="price_1"> </td>
</tr>
<tr>
    <td>2</td>
    <td><div contenteditable></div></td>
    <td class="seatchosen">5 <input type="hidden" name="seatchosen_2" value="5"></td>
    <td><div contenteditable></div></td>
    <td id="price_2"> </td>
</tr>
.
.
.
.
</table>

<p>Price Per Seat: £5</p>
<button onclick="RefreshTable()">Refresh the table</button>

---

我应该在哪里插入这个代码？我是一个完全的业余爱好者。只需将此代码添加到脚本标记中并进行检查。如果您有任何疑问，请告诉我。。仍然不会刷新表。@user3511137:将id和类正确地放在适当的位置并进行检查。@user3511137:只需验证此链接，然后尝试，如果您对这些有任何疑问，请告诉我。@user3511137:请验证此链接。。

<script type="text/javascript">
function RefreshTable () {
    for (i = 1; i <= totalRows; i++) {
        var seatvar =  document.getElementsById("seatchosen_1").value;
        var pricepay = seatvar * 5; 
        document.getElementById('price_1').innerHTML = pricepay;
    }

}
</script>

<table class="editabletable" id="bookingtable" border="1">
<tr>
    <th>Booking Number</th>
    <th>Name</th>
    <th>Number of Seats Chosen</th>
    <th>Seats Chosen</th>
    <th>Price</th>
</tr>
<tr>
    <td>1</td>
    <td><div contenteditable></div></td>
    <td class="seatchosen">3 <input type="hidden" name="seatchosen_1" value="3"></td>
    <td><div contenteditable></div></td>
    <td id="price_1"> </td>
</tr>
<tr>
    <td>2</td>
    <td><div contenteditable></div></td>
    <td class="seatchosen">5 <input type="hidden" name="seatchosen_2" value="5"></td>
    <td><div contenteditable></div></td>
    <td id="price_2"> </td>
</tr>
.
.
.
.
</table>

<p>Price Per Seat: £5</p>
<button onclick="RefreshTable()">Refresh the table</button>