Question

基本上，我是一个javascript函数，它改变了这个表的$this->db->last_query():，以便在按钮上显示鼠标的坐标，我需要它改回HTML表当鼠标离开按钮时。

HTML：

<section>

使用Javascript：

 <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>

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

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

2 个答案: