如何在两帧中显示单个html的内容

时间：2013-07-02 09:35:03

标签： javascript html dom

我是HTML新手。我有一个html包含表和一组div。每个div代表与每行相关的一些数据。场景：当我点击任何一个表格行时，我应该显示相应的div内容。我能够在表格的一列中显示相应的div内容（在相应行的前面）。但我想在单独的框架中显示div内容。这是否可以在1帧中显示主表并单击每一行，在其他帧中显示相应的div详细信息？

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

1 个答案:

答案 0 :(得分：1)

检查演示http://jsfiddle.net/yeyene/NTFb2/2/

不确定您的div内容在哪里。

我认为你的桌子和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());
    });
});