如何在<tr>內彈出div？

Question

這是我的代碼？

<tr style="display: none"><td colspan="5"> 
     <div id="sub-155642" style="display:none;"> 
      <table width="100%"> 
       <tr> 
        <td class="inner-table"></td> 
        <td class="inner-table">Document No</td> 
        <td class="inner-table">Document Type</td> 
        <td class="inner-table" id="amount-row">Total Amount</td> 
       </tr> 
      </table> 
     </div > 
    </td> 
</tr> 

我想從Javascript或jQuery的彈出內部<div id="sub-155642"></div>內容。請幫幫我。

Answer 1

您可以克隆表，一些彈出窗口並顯示它：

HTML

<table> 
    <tr id="sub-155642" style="display: none"> 
    <td colspan="5"> 
     <div id="sub-155642" style="display:none;"> 
     <table width="100%"> 
      <tr> 
      <td class="inner-table"></td> 
      <td class="inner-table">Document No</td> 
      <td class="inner-table">Document Type</td> 
      <td class="inner-table" id="amount-row">Total Amount</td> 
      </tr> 
     </table> 
     </div> 
    </td> 
    </tr> 
</table> 
<button onclick="popup()">Pop-up</button> 

的JavaScript

var popupEl; 

function popup() { 
    var divEl, 
     tableEl, 
     xEl; 
    if(!popupEl) { 
    // Find table 
    tableEl = document.querySelector('#sub-155642 > table'); 
    divEl = tableEl.parentNode; 
    // Create popup and clone table to it 
    popupEl = document.createElement('div'); 
    popupEl.innerHTML = divEl.innerHTML; 
    popupEl.setAttribute('style', 'position:fixed;top:50%;left:50%;width:300px;height:100px;margin-left:-150px;margin-top:-50px;border:1px solid gray'); 
    // Show popup 
    document.querySelector('body').appendChild(popupEl); 
    } else { 
    document.querySelector('body').removeChild(popupEl); 
    popupEl = null; 
    } 
} 

JSBin：http://jsbin.com/OyeXiNu/1/edit

否則，你可以做包裝表可見（但可以肯定的ID是唯一的）：

的JavaScript

var div = document.getElementById('sub-155642'); 
div.style.display = 'block'; 
div.parentNode.parentNode.style.display = 'table-row';