Я делаю очень простую систему, которая регистрирует заказы, все редактируемые, кроме статических разделов «номер заказа» и «цена». Номер бронирования заранее определен, и цена является переменной, зависящей от значения столбца «количество выбранных мест». Столбец «цена» всегда отображается как неопределенный, когда я открываю файл .html, и я хочу обновить код после того, как «количество выбранных мест» было соответственно отредактировано. Цена, которая умножается, также предопределена и является статической, что означает, что когда будет определено количество выбранных мест, она будет умножена на 5. Вот мой код:

{amp}lt;script type="text/javascript"{amp}gt; var seatvar = document.getElementsByClassName("seatchosen"); var pricepay = seatvar * 5 {amp}lt;/script{amp}gt; {amp}lt;script type="text/javascript"{amp}gt; function RefreshTable () { var table = document.getElementById ("bookingtable"); table.refresh (); } {amp}lt;/script{amp}gt; {amp}lt;table class="editabletable" id="bookingtable" border="1"{amp}gt; {amp}lt;tr{amp}gt;{amp}lt;th{amp}gt;Booking Number{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Name{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Number of Seats Chosen{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Seats Chosen{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Price{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt;{amp}lt;td{amp}gt;1{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;div contenteditable{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td class="seatchosen"{amp}gt;{amp}lt;div contenteditable{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;div contenteditable{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;script type="text/javascript"{amp}gt;document.write(pricepay);{amp}lt;/script{amp}gt;{amp}lt;/td{amp}gt;{amp}lt;/tr{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;p{amp}gt;Price Per Seat: £5{amp}lt;/p{amp}gt; {amp}lt;button onclick="RefreshTable()"{amp}gt;Refresh the table{amp}lt;/button{amp}gt; 

Таблица показывает только одну строку, хотя существует двадцать, все они следуют одному и тому же коду. Я включил заголовки тоже. Я не понимаю, почему это не освежает после того, как я отредактировал значение числа выбранных мест.

Попробуйте этот код,

Дайте свой идентификатор в месте успеха функции.

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() чтобы ее значение обновлялось после щелчка.

Это может помочь вам ..

 {amp}lt;script type="text/javascript"{amp}gt; function RefreshTable () { for (i = 1; i {amp}lt;= totalRows; i  ) { var seatvar = document.getElementsById("seatchosen_1").value; var pricepay = seatvar * 5; document.getElementById('price_1').innerHTML = pricepay; } } {amp}lt;/script{amp}gt; {amp}lt;table class="editabletable" id="bookingtable" border="1"{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th{amp}gt;Booking Number{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Name{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Number of Seats Chosen{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Seats Chosen{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Price{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;1{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;div contenteditable{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td class="seatchosen"{amp}gt;3 {amp}lt;input type="hidden" name="seatchosen_1" value="3"{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;div contenteditable{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td id="price_1"{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;2{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;div contenteditable{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td class="seatchosen"{amp}gt;5 {amp}lt;input type="hidden" name="seatchosen_2" value="5"{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;div contenteditable{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td id="price_2"{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; . . . . {amp}lt;/table{amp}gt; {amp}lt;p{amp}gt;Price Per Seat: £5{amp}lt;/p{amp}gt; {amp}lt;button onclick="RefreshTable()"{amp}gt;Refresh the table{amp}lt;/button{amp}gt; 

После команды:

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

Когда вы пытаетесь напечатать переменную seatvar в консоли, как это

console.log(seatvar)

Вы получили бы результат [object HTMLCollection] потому что вы не можете объект несколько номеров, просто число * номер