'How do I refresh a HTML table after editing it?

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:

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

javascripthtmlhtml-tablerefresh


Solution 1:[1]

Try this code,

Give your id in the place of success function.

JS

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

Solution 2:[2]

First thing,

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

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.

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>

Solution 3:[3]

After command: 

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

When you try print variable seatvar in console like this

console.log(seatvar)

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 KesaVan
Solution 2 Vitthal
Solution 3 wonea

Related Questions