javascript 编辑后如何刷新 HTML 表格？

How do I refresh a HTML table after editing it?

提问by user3511137

I am making a very simple system that records bookings, everything is editable other than the 'booking number' and 'price' sections which are static. The booking number is pre-defined and the price is a variable dependent on the value of the 'number of seats chosen' column. The 'price' column always appears as undefined when I open the .html file, and I want to refresh the code after the 'number of seats chosen' has been edited accordingly. The price which multiplies is also pre-defined and static, which would mean that when the number of seats chosen has been defined, it will be multiplied by 5. Here is my code:

我正在制作一个非常简单的系统来记录预订，除了静态的“预订编号”和“价格”部分之外，所有内容都是可编辑的。预订编号是预定义的，价格是一个变量，取决于“选择的座位数”列的值。当我打开 .html 文件时，“价格”列始终显示为未定义，并且我想在相应地编辑“选择的座位数”后刷新代码。The price which multiplies is also pre-defined and static, which would mean that when the number of seats chosen has been defined, it will be multiplied by 5. Here is my code:

<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>

The table only shows one row, though there is twenty they all follow the same code. I included the headers too. I don't understand why it is not refreshing after I have edited the value of the number of seats chosen.

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

回答by KesaVan

Try this code,

试试这个代码，

Give your id in the place of success function.

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

JS

JS

$('.editabletable').click(function () {
    $.ajax({
        url: $(this).data("url"),
        type: 'GET',
        cache: false,
        success: function (result) {
            $('#your_id').html(result);
        }
    });
    return false;
});

回答by KesaVan

After command:

命令后：

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

When you try print variable seatvar in console like this

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

console.log(seatvar)

console.log(seatvar)

You would get result [object HTMLCollection]because you cant object multiple number, just number * number

你会得到结果，[object HTMLCollection]因为你不能反对多个数字，只是数字 * 数字

回答by Vitthal

First thing,

第一件事，

getElementsByClassName returns array of elements. so after var seatvar = document.getElementsByClassName("seatchosen");seatvar will not contain total seats.

getElementsByClassName 返回元素数组。所以在var seatvar = document.getElementsByClassName("seatchosen");seatvar之后将不包含总座位数。

Second,

第二，

You have to calculate price and seats after button is clicked. That is in RefreshTable()function so that its value will get updated after click.

单击按钮后，您必须计算价格和座位。这是在RefreshTable()函数中，因此它的值将在单击后更新。

This may help you..

这可能会帮助你..

<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>