Refresh <table> HTML without refresh entire page Javascript Only

Question

I would like to know how can i refresh my without refresh the entire page in Javascript

Exemple of HTML

<table class="list" cellpadding="1" cellspacing="1">
        <thead>
            <tr>
                <td class="checkbox edit"></td>
                <td class="Element sortable" onclick="My.Game.List.sort(223, 'eleemnt');">Element</td>
                <td class="ew sortable" onclick="My.Game.List.sort(223, 'ew');">Pop.</td>
                <td class="distance sortable" onclick="My.Game.RaidList.sort(223, 'distance');">Distance</td>
                <td class="element sortable" onclick="My.Game.List.sort(223, 'element');">Option</td>
                <td class="last sortable" onclick="My.Game.List.sort(223, 'last');">Last</td>
                <td class="action"></td>
            </tr>
        </thead>
        <tbody>
             <tr class="slotRow" id="slot-row-3021">
        <td class="checkbox">
            <input id="slot3021" name="slot[3021]" type="checkbox" class="markSlot check" onclick="My.Game.List.markSlot(223, 3021, this.checked);">
        </td>
        <td class="element">

                <a href="position_details.php?x=59&amp;y=14">Artic</a>
        </td>
        <td class="ew">
            31          </td>
        <td class="distance">
            2.2         </td>
        <td class="Option">
            <div class="icon"><img class="unit u11" alt="My ALt" src="img/x.gif"><span class="MyClass">2</span></div>           </td>
        <td class="last">
                                    <img src="img/x.gif" class="My Class"> // Might Change
                                                <img src="img/x.gif" class="carry full" alt="My Alt // Might Change
                    <a href="berichte.php?id=159141|bb7215c9">18.09.18, 15:26</a> // Change
                    <div class="clear"></div>
                                </td>
        <td class="action">
            <a class="arrow" href="#" onclick="My.Game.List.editSlot(223, 3021, true, 'rallyPoint'); return false;">Éditer</a>
        </td>
    </tr>               
        </tbody>
    </table>

Basicly i would like to refresh the content of all the row of my Table

I tried this but it seems not working i don't understand why :

JAVASCRIPT CODE :

 setInterval(function() {

                document.getElementsByTagName('table')[0].reload();

                }, 500);

NB : The function is just a timer to refresh the table each 500 ms.

What is excepted to change :

<tr class="slotRow" id="slot-row-3021">
            <td class="checkbox">
                <input id="slot3021" name="slot[3021]" type="checkbox" class="markSlot check" onclick="My.Game.List.markSlot(223, 3021, this.checked);">
            </td>
            <td class="element">

                    <a href="position_details.php?x=59&amp;y=14">Artic</a>
            </td>
            <td class="ew">
                31          </td>
            <td class="distance">
                2.2         </td>
            <td class="Option">
                <div class="icon"><img class="unit u11" alt="My ALt" src="img/x.gif"><span class="MyClass">2</span></div>           </td>
            <td class="last">
                                        <img src="img/x.gif" class="My Class"> // Might Change
                                                    <img src="img/x.gif" class="carry full" alt="My Alt // Might Change
                        <a href="berichte.php?id=159141|bb7215c9">18.09.18, 15:26</a> // Change
                        <div class="clear"></div>
                                    </td>
            <td class="action">
                <a class="arrow" href="#" onclick="My.Game.List.editSlot(223, 3021, true, 'rallyPoint'); return false;">Éditer</a>
            </td>
        </tr>

Best regards !

Answer 1

There are a lot of answers to your question.

You could simply fix this by replacing the (inner)HTML of the element any time an update takes place.

Something like HTML : draw table using innerHTML

Messy, but it is the answer to your question.

Your HTML is not dynamicly updating values, that would be done trough javascript. If you are getting your values from a webservice - look into AJAX.