Question

我正在制作一个非常简单的系统来记录预订，除了预订号码之外，一切都是可编辑的。和＆＃39;价格＆＃39;静止的部分。预订号码是预先定义的，价格是一个变量，取决于所选座位数量的价值＆＃39;柱。价格＆＃39;当我打开.html文件时，列始终显示为未定义，并且我希望在选择的座位数后刷新代码＆＃39;已经相应编辑。乘以的价格也是预先定义的和静态的，这意味着当已经定义了所选座位数时，它将乘以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>

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

Answer 1

试试这段代码，

将你的身份证明放在成功的地方。

<强> JS

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

Answer 2

命令后：

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

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

console.log(seatvar)

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

Answer 3

首先，

getElementsByClassName返回元素数组。所以在var seatvar = document.getElementsByClassName("seatchosen");之后 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>

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

3 个答案: