0

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

1 に答える 1

1

デモをチェックhttp://jsfiddle.net/yeyene/NTFb2/2/

それぞれの div コンテンツがどこにあるかわかりません。

このようなテーブルとdivを想定しています。(1 つの 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;
}

Jクエリ

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