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

如何在里面弹出div？

1 个答案: