我是HTML新手。我有一個HTML包含表和一組div。每個div代表與每行相關的一些數據。場景：當我點擊任何表格行時，我應該顯示各自的div內容。我能夠在表格的一列中顯示相應的div內容（位於各行的前面）。但我想在單獨的框架中顯示div內容。是否可以在1幀中顯示主表並單擊每行，其他幀中的各個div細節？如何在兩個框架中顯示單個html的內容

<html> 
<body> 
<script> 
function toggle(d, link){ 
    var e=document.getElementById(d); 
    if (e.style.display == ''){ 
    e.style.display = 'none'; link.innerHTML = '[+]'; 
    } else { 
    e.style.display = '';link.innerHTML = '[-]'; 
    } 
} 
</script> 
</head> 
<body> 
<div id="Result_Details"><table id="resultDetails" border=1><th colspan="3">Result Details</th> 
<tr class="collapse"> 
    <td width="4%">XYZ</td> 
    <td>Item 1</td> 
    <td><a href="#" onclick="toggle('Node_Details0', this)">more...</a> 
    <div id="Node_Details0" style="display: none"> 
    <table border=1><tbody><th colspan=3>IT Details</big></th><tr><td><b>Foo</b></td></table> 
    </div> 
    </td> 
</tr> 
</body> 
</html>

來源

2013-07-02 MIM

顯示代碼，有人可以幫助你。 –

檢查DEMO http://jsfiddle.net/yeyene/NTFb2/2/

不知道哪裏是你相應的DIV的內容。

我假設你的表格和div是這樣的。（可能只有一個格）

HTML

<div id="frame1"> 
    <table border="1"> 
     <tr> 
      <td>1 
       <div class="content">Contents of row 1</div> 
      </td> 
      <td>1 
       <div class="content">Contents of row 1</div> 
      </td> 
      <td>1 
       <div class="content">Contents of row 1</div> 
      </td> 
     </tr> 
     <tr> 
      <td>2 
       <div class="content">Contents of row 2</div> 
      </td> 
      <td>2 
       <div class="content">Contents of row 2</div> 
      </td> 
      <td>2 
       <div class="content">Contents of row 2</div> 
      </td> 
     </tr> 
     <tr> 
      <td>3 
       <div class="content">Contents of row 3</div> 
      </td> 
      <td>3 
       <div class="content">Contents of row 3</div> 
      </td> 
      <td>3 
       <div class="content">Contents of row 3</div> 
      </td> 
     </tr> 
    </table> 
</div> 
<div id="frame2"> 
    <div id="showContent"></div> 
</div>

CSS

#frame1{float:left;width:100%;height:150px;overflow:auto;} 
#frame2{float:left;width:100%;height:auto;overflow:auto;margin-top:10px;} 
table { 
    float:left; 
    width:100%; 
} 
table .content { 
    visibility:hidden; 
    width:1px; 
    height:1px; 
} 
#showContent { 
    float:left; 
    width:100%; 
    background:#ccc; 
}

JQUERY

$(document).ready(function(){ 
    $('table tr').on('click',function(){ 
     $('#showContent').html($(this).find('.content').html()); 
    }); 
});

來源

2013-07-02 09:51:26 yeyene

我已添加代碼以供參考。 – MIM

是的，輸出應該是演示中顯示的內容。但我想在單獨的框架中。由於我的html可以包含超過1000行，並且如果我們在單獨的框架中顯示行詳細信息，它會很好。 – MIM

再次檢查我的更新的答案，http://jsfiddle.net/yeyene/NTFb2/2/ ...我splid 2幀，頂部50％和底部50％，您的錶行可以通過滾動來查看，也內容可以通過點擊行來看到。 – yeyene

如何在兩個框架中顯示單個html的內容

回答

HTML

CSS

JQUERY

相關問題