How to reset an HTML table to its original after changing it with a javascript function?

Question

So basically, I've a javascript function, that changes the <section> in which this table is to show the coordinates of the mouse on a button, and I need it to change back to the HTML table when the mouse comes off the button.

HTML:

 <section class = "table">
                    <table id = "table">
                        <tr>
                            <th colspan = "3">Table Data</th>
                        </tr> 

                        <tbody>                            
                    <tr>
                        <td rowspan = "2">1</td>  
                        <td>2</td>
                        <td>3</td>  
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>5</td>
                    </tr>   
                    <tr>
                        <td>6</td>
                        <td rowspan = "2">7</td>
                        <td>8</td>    
                    </tr> 
                    <tr>
                        <td>9</td>
                        <td>10</td>
                    </tr>
                        </tbody>

                        <tfoot>
                    <tr>
                        <td>11</td>      
                        <td>12</td>
                        <td rowspan = "2">13</td>
                    </tr>  
                    <tr>
                        <td>14</td>    
                        <td>15</tf>
                    </tr> 
                </tfoot>    
                    </table>    
                </section>

Javascript:

function displayCoordinates(e){        
    table.innerHTML = "MouseX: " + e.offsetX + "<br>" + "MouseY: " + e.offsetY;
}

function resetTable(){

}

Answer 1

It would be done by saving the original html string.

var originalHTML = table.innerHTML
function displayCoordinates(e){
  table.innerHTML = "MouseX: " + e.offsetX + "<br>" + "MouseY: " + e.offsetY;
}
function resetTable(){
  table.innerHTML = originalHTML
}

Answer 2

Clone the table at the start. Then append it afterward.

var tablDom = document.queryselector('table').clone(),
      wrapperDom = document.queryselectorAll('.table')[0];

function displayCoordinates(e){
  table.innerHTML = "MouseX: " + e.offsetX + "<br>" + "MouseY: " + e.offsetY;
}
function resetTable(){
  wrapperDom.appendChild(tableDom);
}