Link to home
Start Free TrialLog in
Avatar of EricPelletier
EricPelletierFlag for Canada

asked on

How to resize a table cell , add a new cell and delete cell?

Hi Experts,
I have a web page with a table where the text change by clicking a link on the same page. For one of the link, I would like to resize the existing table cell and add a new cell beside. The goal is to add text in two column. When I clic other link in the same page, I need to delete that new cell and resize the other to the original size.
I includes a part of my main page and my .js file. the part that need to display in column is "case (monlien="4"):


Is that possible or is there another way to display the text in two collumn in one cell?
Thank you

/*MyMainPage.html*/
<table id="mytable" table border="0" cellspacing="0" cellpadding="0" width="509">
        <tr>
          <td height="39" class="pageName"><p>Genevi&egrave;ve et Eric
          </p>          </td>
		</tr>
 
		<tr>
          <td width="509" valign="top" class="bodyText"><p>text here</p>
            <p>Pour r&eacute;servations/informations :<br>
              Mme Chantal Deslongchamps; Club Voyages Repentigny<br>
              Tel : 450-582-6065</p></td>
        </tr>
      </table>
 
/*Mycontent.js*/
 
function changeContent(monlien){
    switch (monlien)
	{
	case (monlien="1"):
		montitre="Destination Cuba<br /><br /><br />";
		montext="L'archipel Cubain...<br />Cet archipel dune superficie de 110 992 km2 se situe dans la partie la plus occidentale de la Caraïbe insulaire, à lembouchure du Golfe du Mexique.<br /><br /><iframe src=\"http://www.my-google-maps.com/my-google-maps.php?SID=1225540759-G2bNg\" width=\"575\" height=\"455\" frameborder=\"0\" hspace=\"0\" vspace=\"0\" marginheight=\"0\" marginwidth=\"0\" scrolling=\"no\"></iframe>";
		montext2="";
	break;
	case (monlien="2"):
		montitre="Mariage sur la plage";
		montext=" bonjour coco";
		montext2="";
	break;
	case (monlien="3"):
		montitre="Faire Part";
		montext="monfairepart.pdf";
		montext2="";
	break;
	case (monlien="4"):
		montitre="Les invités qui ont réservés jusquà maintenant<br /><br />";
		montext="<br />Côté de la mariée<br /><br />Claire Brisson, mère<br />Jean-Yvon Brisson, père<br />Françoise Pelletier, marraine<br />Henri Pelletier, parrain<br />Christine Pelletier, cousine<br />Jean-Daniel Brisson, frère<br />Michelle Sicotte, belle-sSur et témoin<br />Michèle Bénard, amie<br />Sophie Léonard, amie<br />Jean-Christophe Brisson Sicotte, neveu<br />Mathilde Brisson Sicotte, nièce<br />Maude Brisson Sicotte, nièce";		
		montext2="<br />Côté du marié<br /><br />Josée Pelletier, soeur<br />Myriam Nadeau, sSur<br />François Gagnon, beau-frère<br />Yannick Ménard, ami et témoin<br />Stéphane Nadeau, demi-frère<br />Diane, sa conjointe";
	break;
	case (monlien="5"):
		montitre="Information<br /><br /><br /><br />";
		montext="<strong><u>Passeport:</u></strong><br />N'oubliez pas votre passeport, il est essentiel pour entrer et sortir du pays. Vous trouvrez le formulairesur le site suivant: <a href=\"http://www.ppt.gc.ca/form/index.aspx?lang=fra\" target=\"_blank\">Passeport Canada</a><br /><br /><strong><u>Pour quitter Cuba:</u></strong><br /> Pensez à préparer $25 CUC (pesos convertibles) en liquide pour votre taxe d'aéroport. Les visiteurs qui quittent Cuba peuvent exporter 50 cigares, et 1,14 litre d'alcool (deux bouteilles d'une contenance de 750 ml). Pour exporter dautres articles, comme des objets dart ou des antiquités, il faut obtenir une autorisation de la Direction du Patrimoine du Ministère de la Culture. De nombreux revendeurs accrédités possèdent légalement de telles autorisations et doivent vous fournir un reçu officiel.<br />Pour plus d'information, vous pouvez consulter le site du gouvernement du Canada <a href=\"http://www.voyage.gc.ca/dest/report-fr.asp?country=69000\" target=\"_blank\">Affaires étrangère et Commerce International</a><br /><br />Vous êtes curieux et désirez plus d'information au sujet de l'hôtel, voyez leur site:<br /><a href=\"http://www.cayosantamaria.info/hotel_melialasdunas_fr.html\" target=\"_blank\">http://www.cayosantamaria.info/hotel_melialasdunas_fr.html</a>";
		imgtitre="Réception du Melia Las Dunas";
		monimage="<img src=\"images/reception_Melia.jpg\" alt=\"Image 1\" width=\"242\" height=\"175\" vspace=\"6\" border=\"0\">";
		montext2="";
	break;
	}
	
	var x=document.getElementById('mytable').rows	
    var y=x[0].cells
    /*Modifiy the table subject*/
	y[0].innerHTML=montitre
	/*Modifiy the table content*/
	var y=x[1].cells
	y[0].innerHTML=montext
	y[1].innerHTML=montext2
	
	var p=document.getElementById('mypic').rows
	var q=p[0].cells
    /*Modifiy the table subject*/
	q[0].innerHTML=imgtitre
	/*Modifiy the table content*/
	var q=p[1].cells
	q[0].innerHTML=monimage

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of quincydude
quincydude
Flag of Hong Kong image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Avatar of KNVB HK
KNVB HK
Flag of Hong Kong image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of EricPelletier

ASKER

Ok! Thank you Quincydude
This works perfectly

There is only one thing missing. I thought adding a cell would take the same settings as te rest of the table from my CSS stylesheet but it doesn't. Is there a way to apply the stylesheet settings without reloading the page?
Thank you
your code helped me to fix my little problems
From my previous code, you can add
mycell.id = "myid";
or
mycell.className = "myClass ";
to dynamically set the class or id of the added cell in run time