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