• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1934
  • Last Modified:

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

0
EricPelletier
Asked:
EricPelletier
  • 2
  • 2
2 Solutions
 
quincydudeCommented:
You can use javascript to add and delete cells and setting the cell size too. The idea is similar as below
 

<html>
<head>
<script language="javascript" >
	
function addCell()
{
	var x=document.getElementById('mytable').rows;	
    var row=x[0]; //first row in example
	
	row.cells[0].width="150px"; //resize first cell
 
	var cellIndex = 1; //suppose you want to add the cell here
	var mycell = row.insertCell(cellIndex);
	mycell.innerHTML="HELLO!";
 
}
 
function removeCell()
{
	var x=document.getElementById('mytable').rows;	
    var row=x[0]; //first row in example
	
	row.cells[0].width="300px"; //reset size of first cell
 
	var cellIndex = 1; //suppose you want to delete the cell here
	var mycell = row.deleteCell(cellIndex);
 
}
	
</script>
</head>
<body>
<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>
	  <input type=button value="Add" onclick="addCell();"/>
	   <input type=button value="Delete" onclick="removeCell();"/>
 </body>
 </html>

Open in new window

0
 
cstsangCommented:
EricPelletier, You can reference my code.
<table id="t" border=1>
	<tr>
		<td>col 1</td>
		<td>col 2</td>
	</tr>
	<tr>
		<td>col 1</td>
		<td>col 2</td>
	</tr>	
</table>
<input type=button onclick="deleteCell()" value="delete cell">
<input type=button onclick="addCell()" value="add cell">
<input type=button onclick="mergeCell()" value="merge cell">
<script language="javascript">
function deleteCell()
{
	var tableObject=document.getElementById("t");
	var rowObject=tableObject.rows[0];
	rowObject.deleteCell(0);
}  	
function addCell()
{
	var tableObject=document.getElementById("t");
	var rowObject=tableObject.rows[0];
    var cellObject=rowObject.insertCell(rowObject.cells.length);
	cellObject.innerHTML="col "+(rowObject.cells.length);
}
function mergeCell()
{
	var tableObject=document.getElementById("t");
	var rowObject=tableObject.rows[0];
	var data=rowObject.cells[0].innerHTML+"&nbsp;"+rowObject.cells[1].innerHTML;
	rowObject.deleteCell(1);
	rowObject.cells[0].innerHTML=data;
	rowObject.cells[0].colspan=2;
}
</script>	

Open in new window

0
 
EricPelletierAuthor Commented:
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?
0
 
EricPelletierAuthor Commented:
Thank you
your code helped me to fix my little problems
0
 
quincydudeCommented:
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
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now