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