编辑 HTML 表格后如何刷新它?
Posted
技术标签:
【中文标题】编辑 HTML 表格后如何刷新它?【英文标题】:How do I refresh a HTML table after editing it? 【发布时间】:2014-05-21 05:46:57 【问题描述】:我正在制作一个非常简单的系统来记录预订,除了“预订号”和“价格”部分是静态的之外,所有内容都是可编辑的。预订号是预定义的,价格是一个变量,取决于“选择的座位数”列的值。当我打开 .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>
该表仅显示一行,尽管有 20 行它们都遵循相同的代码。我也包括了标题。我不明白为什么我编辑了选择的座位数的值后它没有刷新。
【问题讨论】:
【参考方案1】:命令后:
var seatvar = document.getElementsByClassName("seatchosen");
当您尝试像这样在控制台中打印变量座位变量时
console.log(seatvar)
你会得到结果[object HTMLCollection]
,因为你不能反对多个数字,只是数字 * 数字
【讨论】:
【参考方案2】:第一件事,
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>
【讨论】:
【参考方案3】:试试这个代码,
用你的id代替成功功能。
JS
$('.editabletable').click(function ()
$.ajax(
url: $(this).data("url"),
type: 'GET',
cache: false,
success: function (result)
$('#your_id').html(result);
);
return false;
);
【讨论】:
我应该在哪里插入这段代码?我是一个完全的业余爱好者。 只需将此代码添加到脚本标签中并检查它。如果您有任何疑问,请告诉我.. 仍然没有刷新表格。 @user3511137:正确给出该位置的 id 和类并检查。 @user3511137:只需验证此链接datatables.net/forums/discussion/8365/…,试试看,如果您对此有任何疑问,请告诉我..以上是关于编辑 HTML 表格后如何刷新它?的主要内容,如果未能解决你的问题,请参考以下文章