如何在使用javascript函数更改HTML表后将其重置为原始表格？

Question

所以基本上，我有一个javascript函数，它改变了<section>，其中这个表是在按钮上显示鼠标的坐标，我需要它在鼠标离开按钮时改回HTML表。

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

这将通过保存原始的html字符串来完成。

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

Answer 2

在开始时克隆表。然后追加它。

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);
}