我正在制作一个记录预订的非常简单的系统,除了“预订号”和“价格”部分之外,一切都是可编辑的,这些部分是静态的。预订编号是预先定义的,价格是一个变量,取决于“所选座位数”列的值。当我打开.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
$('.editabletable').click(function () {
$.ajax({
url: $(this).data("url"),
type: 'GET',
cache: false,
success: function (result) {
$('#your_id').html(result);
}
});
return false;
});
第一件事,
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>
命令后:
var seatvar = document.getElementsByClassName("seatchosen");
当您在控制台中尝试打印变量seatvar时
console.log(seatvar)
你会得到结果qazxsw poi因为你不能反对多个数字,只是数字*数字