CODEWITHSUNDEEP
javascriptjqueryhtml
user3500105
user3500105

Reputation: 3

How to merge two different HTML?

How can i merge 1 table with another table from other page?

I basicly having 3 radio buttons.

My intention is when first i tick A,then it will show website A and next while ticking B...i shall be able to view website A too...So after thinking B...i will see website A on my left & website B on my right.

But my code below could not work as i expected...it will juz display the content of the last radio button i tick.

Kindly assist.TQ

<!DOC HTML>
<HTML>
<TITLE></TITLE>
<HEAD>
<script type="text/JavaScript">

<!--
function show(id)
{
 if (document.getElementById(id).style.display == 'none')
 {
      document.getElementById(id).style.display = '';
 }
}
//-->

<!--
function hide(id)
{
      document.getElementById(id).style.display = 'none';

}
//-->
</script>

</HEAD>
<BODY>
<table cellspacing="1" cols="3" border="0">
<tbody>
<tr valign="top" align="left">
  <td width="202"><b>Please, select option</b></td>

  <td width="481">A
    <input type="radio" name="Option" onfocus="hide('tblB');hide('tblC');show('tblA');">
    B
    <input type="radio" name="Option"           
onfocus="hide('tblA');hide('tblC');show('tblB');return true;">
    C      
    <input type="radio" name="Option"  
onfocus="hide('tblA');hide('tblB');show('tblC');return true;">
  </td>
 </tr>
 </tbody>
</table>


<table id="tblA" style="DISPLAY: none" cols="1" cellpadding="2">
<tbody>
<tr valign="top" align="left">

<td>
  You&nbsp;select A,
  table
  tblA is shown<frameset cols="50%,*">
<frame src="http://www.huawei.com">
</frameset>&nbsp;
  </td>
</tr>
</tbody>
</table>
<table id="tblB" style="DISPLAY: none" cols="1" cellpadding="2">
<tbody>
<tr valign="top" align="left">
  <td>
   You&nbsp;select B, table tblB
   is shown<frameset cols="50%,*"><frame src="https://www.google.com/"></frameset>&nbsp;
  </td>
</tr>
</tbody>
</table>
<table id="tblC" style="DISPLAY: none" cols="1" cellpadding="2">
<tbody>
<tr valign="top" align="left">
  <td>
   You&nbsp;select C, table tblC
   is shown&nbsp;
  </td>
</tr>
</tbody>
</table>
    </BODY>
</HTML>

http://jsfiddle.net/A5kQA/

Upvotes: 0

Views: 109

Answers (1)

isherwood
isherwood

Reputation: 61133

I'm not sure I understand your question, but this might help.

http://jsfiddle.net/isherwood/eXEJe

<b>Please select an option</b>
A <input type="radio" name="Option" />
B <input type="radio" name="Option" />
C <input type="radio" name="Option" />

$('input[type="radio"]').click(function () {
    $('table').eq( $(this).index() -1 ).show();
});

Here's a better approach that doesn't use tables for layout:

http://jsfiddle.net/isherwood/eXEJe/5

.frame-wrapper {
    display: none;
    float: left;
    width: 32%;
    margin-right: 1%;
}

<div id="tblA" class="frame-wrapper">
    You selected A, table tblA is shown

    <frame src="http://www.huawei.com" />
</div>

$('input[type="radio"]').click(function () {
    $('.frame-wrapper').eq( $(this).index() -1 ).show();
});

Upvotes: 1

Related Questions