0

我是 HTML 新手。我有一个包含表和一组 div 的 html。每个 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>
4

1 回答 1

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

查询

$(document).ready(function(){
    $('table tr').on('click',function(){
        $('#showContent').html($(this).find('.content').html());
    });
});
于 2013-07-02T09:51:26.283 回答