JavaScript関数を使用してHTMLテーブルを元に戻すにはどうすればよいですか？

Question

基本的に、私はこのテーブルがボタンの上にマウスの座標を表示するための<section>を変更するjavascript関数を持っています、そして、マウスがボタンから出てきたときに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); 
}