Find solution
How to switch between two tables?

how to switch two tables on different image click on first row using html

  • I have to create a 1 page html website.I have already done it in french language now i am trying to add an option at the top of my website to translate language between french or english. The idea is to have a table which contains a button of flag of France and england (french and english) in first row (something like this:http://prntscr.com/6yq4t2 ) now on changing the flag should switch to another table whose contents are written in the language of flag clicked using html and the existing table will be replaced by the table of flag-language clicked (actually there are 2 tables(one at a time) having English and French contents which must switch on click to flags on the first row of default table-which is french). see this part in code: <h1 style="margin: 0; font-size: 12px; color:#33384f;"> Language translation: <img width="18" height="10" src="http://www.mapsofworld.com/images/world-countries-flags/france-flag.gif" alt="" onclick="myFunctionFrench()" /> <img width="18" height="10" src="http://vignette1.wikia.nocookie.net/mortalengines/images/b/b6/English_flag.png/revision/latest?cb=20100614220751" alt="" onclick="myFunctionEnglish()" /> </h1> I have all my html like this (it don't contain code for English table but it will have the table of same html code except that the written content are in English and the switching has to be done between these two tables on respective flag selection): <!DOCTYPE PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Axestrack</title> <!--general stylesheet--> <style type="text/css"> p { padding: 0; margin: 0; } h1, h2, h3, h4, h5, p, li { font-family: Helvetica, Arial, sans-serif; } td { vertical-align: top; } ul, ol { margin: 0; padding: 0; } .tab { margin-left: 40px; margin-right: 40px; } </style> </head> <body> <div id="img_home"></div> <table cellspacing="0" border="0" cellpadding="0" width="100%" align="center" style="margin: 0px;"> <tbody> <tr valign="top"> <td valign="top"> <!--container--> <table cellspacing="0" cellpadding="0" border="11" align="center" width="621" bgcolor="#f7f3e6" background="images/bg-stamp-2.jpg" style="border-width:11px; border-color:#ccc; border-style:solid; background-color:#f7f3e6; background-image: url('http://www.axestrack.com/wp-content/uploads/bg-stamp-2.jpg'); background-position: right top !important; background-repeat: repeat-x;"> <tbody> <tr> <td valign="top" border="0" style="border: none; "> <table cellspacing="0" cellpadding="0" border="0" align="center" style="padding-bottom: 13px;"> <tbody> <tr> <h1 style="margin: 0; font-size: 12px; color:#33384f;"> Language translation: <img width="18" height="10" src="http://www.mapsofworld.com/images/world-countries-flags/france-flag.gif" alt="" onclick="myFunctionFrench()" /> <img width="18" height="10" src="http://vignette1.wikia.nocookie.net/mortalengines/images/b/b6/English_flag.png/revision/latest?cb=20100614220751" alt="" onclick="myFunctionEnglish()" /> </h1> <td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td> </tr> <tr> <td valign="top" width="511" style="padding-top: 19px; padding-left: 21px;"> <h1 style="margin: 0; font-size: 12px; color:#33384f;">Michel</h1> <h1 style="margin: 0; font-size: 12px; color:#33384f;">Résidence étudiante</h1> </td> </tr> <tr></tr> </tbody> </table> </td> </tr> <tr> <td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td> </tr> <tr> <td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;"> <h1 style="margin: 0; font-size: 12px; color:#33384f;">Recherche d'emploi(développement C/ C++/ C#/ Silverlight/ Wpf/ Asp.Net/ MVC-MVVM) </h1> </td> </tr> <tr> <td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td> </tr> <!--Formation--> <tr> <td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;"> <h1 style="margin: 0; font-size: 12px; color:red;">Formation: </h1> </td> </tr> <!-- Paris --> <tr> <td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;"> <h1 style="margin: 0; font-size: 12px;">2012-2014 :</h1> <p class="tab" style="margin-right:0;font-size: 12px;"> Master en Génie informatique à paris. (Diplôme d'ingénieur) </p> </td> </tr> </tbody> </table> </td> </tr> <!----> </tbody> </table> </tr> <tr> <td valign="top" colspan="2"><img width="599" height="6" src="http://www.axestrack.com/wp-content/uploads/double-spacer.jpg" alt="" /></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <!--faltu kaam here --> <script> function myFunctionFrench() { document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow"; } function myFunctionEnglish() { document.getElementsByTagName("BODY")[0].style.backgroundColor = "green"; } </script> </body> </html> How to implement this switching of 2 tables on flag click which contains the language-flag in first row. Any idea ? (please take my html code as reference to answer my question). Could some one please help me in doing this ?

  • Answer:

    Write all the divs (and put class on them, like for example : .french ) in both languages and then use jQuery as following : $(document).ready(function(){ $("#frenchFlag").click(function(){ //When you click on the French flag $(".french").show(); //Show the divs with the class .french $(".english").hide(); //Hide the divs with the class .english }); $("#englishFlag").click(function(){ //Same thing $(".french").hide(); $(".english").show(); }); }); Obviously you'll hide either the divs with the class .french or the divs with .english at the start of the loading of your page (basically in your $(document).ready(function() { //Write here, for example if your website is in French by default : $(".french").show(); $(".english").hide() });

testing Test at Stack Overflow Visit the source

Was this solution helpful to you?

Other answers

<html> <head> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } </style> </head> <body> <button id="bt1">In English</button> <button id="bt2">In French</button> <div> <div id="one"> <table style="width:50%"> <tr> <th>Language</th> <th>Name</th> <th>Pattern</th> </tr> <tr> <td>English</td> <td>c#</td> <td>MVC</td> </tr> <tr> <td>English</td> <td>Java</td> <td>J2EE</td> </tr> <tr> <td>English</td> <td>.Net</td> <td>MVC4</td> </tr> </table> </div> <div id="two" style="display:none"> <table style="width:50%"> <tr> <th>Language</th> <th>Name</th> <th>Pattern</th> </tr> <tr> <td>French</td> <td>PHP</td> <td>MVC</td> </tr> <tr> <td>French</td> <td>Java</td> <td>J2EE</td> </tr> <tr> <td>French</td> <td>.Net</td> <td>MVC4</td> </tr> </table> </div> </div> <script> function swap(one, two) { document.getElementById(one).style.display = 'block'; document.getElementById(two).style.display = 'none'; } document.getElementById('bt1').addEventListener('click',function(e){ swap('one','two'); }); document.getElementById('bt2').addEventListener('click',function(e){ swap('two','one'); }); </script> </body> </html> Instead of button you can replace your image. <div id="bt1" ><img src="english.png" alt="Smiley face" height="20" width="20"></div>

gihan

You could write your HTML like this: <div id='english' style='display: none'> [your complete english HTML] </div> <div id='french' style='display: block'> [your complete french HTML] </div> And for your buttons: <img [...] onClick="document.getElementById('english').style.display=none; document.getElementById('french').style.display=block;"> For the french version. The english switches the display attribute, of course.

Burki

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.