Jump to content

Javascript table adding text


rogerio
 Share

Recommended Posts

This table has 2 rows and I am trying to add text to the second row (see "// add text to r2.") and maintain a height of 276px but the row is expanding to the height of the text.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>create DOM table</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script>	function start(objText) {	  		var mybody = document.getElementsByTagName("body")[0]; // get the reference for the body		mytable	 = document.createElement("table"); // creates a <table> element and a <tbody> element		mytablebody = document.createElement("tbody");// creating all cells// create cell r1 c1  mycurrent_row = document.createElement("tr"); // creates a <tr> element r1  // creates a <td> element  mycurrent_cell = document.createElement("td");  mycurrent_cell.setAttribute("width", "356px");   // creates a text node  mycurrent_txtbox = document.createElement("img");  mycurrent_txtbox.setAttribute('src',"images/x11_title.gif");  mycurrent_cell.appendChild(mycurrent_txtbox);  // appends the cell <td> into the row <tr>  mycurrent_row.appendChild(mycurrent_cell); // create cell r1 c2  // creates a <td> element  mycurrent_cell = document.createElement("td");  mycurrent_cell.setAttribute("width", "24px");   // creates a text node  mycurrent_txtbox = document.createElement("img");  mycurrent_txtbox.setAttribute('src',"images/x11_close.gif");  mycurrent_cell.appendChild(mycurrent_txtbox);  // appends the cell <td> into the row <tr>  mycurrent_row.appendChild(mycurrent_cell);  // appends the row <tr> into <tbody>  mytablebody.appendChild(mycurrent_row); // create cell r2 c1  mycurrent_row = document.createElement("tr"); // creates a <tr> element r1  // creates a <td> element  mycurrent_cell = document.createElement("td");  mycurrent_cell.setAttribute("colspan", "2px");  mycurrent_cell.setAttribute("width", "380px");  mycurrent_cell.setAttribute("height", "276px");   // add text to r2.  newText=document.createTextNode(objText);  mycurrent_cell.appendChild(newText);   // appends the cell <td> into the row <tr>  mycurrent_row.appendChild(mycurrent_cell);  // appends the row <tr> into <tbody>  mytablebody.appendChild(mycurrent_row); 		// sets the border attribute of mytable to 2;		mytable.setAttribute("border", "2");	    mytable.setAttribute('cellpadding', '0')  mytable.setAttribute('cellspacing', '0')  mytable.setAttribute('cellpadding', '0')		// appends <tbody> into <table>		mytable.appendChild(mytablebody);		// appends <table> into <body>		mybody.appendChild(mytable);}</script></head><body><div id='styled_popup' name='styled_popup' style='width:380px; height:300px; position:absolute; top:150px; left:50px;'><input type="button" onClick="start('Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)');"/></div></body>

Link to comment
Share on other sites

Tables always expand to fit what's inside the cells.
I have a table with the same text that was created in HTML and it does not expand.
<div id='styled_popup' name='styled_popup' style=' width: 380px; height: 300px; display:none; position: absolute; top:150px; left: 50px;'><table width='380' cellpadding='0' cellspacing='0' border='0'0' >  <tr>   <td><img height='23' width='358' src='images/x11_title.gif' class='dragme'></td>   <td><a href='javascript:styledPopupClose();'><img height='23' width='24'src='images/x11_close.gif' border='0' class="close"></a></td>   </tr>   <tr><td colspan='2' style='top:24px;'>    <div class="text" style="width:377px; height:277px; border-left: 2px solid gold; border-bottom: 2px solid gold; border-right: 2px solid gold;">   Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving:-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see memoving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to seeme moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title tosee me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window titleto see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my windowtitle to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag mywindow title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Dragmy window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving:-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see memoving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to seeme moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title tosee me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window titleto see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my windowtitle to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag mywindow title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Dragmy window title to see me moving :-)    </div>   </td>  </tr></table></div><input type='submit' onMouseDown='setPos(event, document.getElementById("styled_popup"));' value=' Fire! '>

Link to comment
Share on other sites

That's my attempt with the script - set row 1 for 24 and row 2 for 277 making up 299, but it isn't working. Here is one where I added the div into the script:

<script>	function start(objText) {		var mybody = document.getElementsByTagName("body")[0]; // get the reference for the body		// create the div		mydiv = document.createElement("div");		mydiv.style.width="377px";		mydiv.style.height="277px";		// append the div to the body		mybody.appendChild(mydiv);	  		mytable	 = document.createElement("table"); // creates a <table> element and a <tbody> element		mytablebody = document.createElement("tbody");	  mytable.setAttribute('cellpadding', '0')	  mytable.setAttribute('cellspacing', '0')	  mytable.setAttribute('border', '0')	  mytable.setAttribute('width', '380')// creating all cells   // create cell r1 c1	  mycurrent_row = document.createElement("tr"); // creates a <tr> element r1  // creates a <td> element	  mycurrent_cell = document.createElement("td");   // creates a text node	  mycurrent_image = document.createElement("img");	  mycurrent_image.setAttribute('src',"images/x11_title.gif");	  mycurrent_image.setAttribute('height', '23px');	  mycurrent_image.setAttribute('width', '358px');	  mycurrent_cell.appendChild(mycurrent_image);  // appends the cell <td> into the row <tr>	  mycurrent_row.appendChild(mycurrent_cell);// create cell r1 c2  // creates a <td> element	  mycurrent_cell = document.createElement("td");	  mycurrent_cell.setAttribute("width", "24px");   // creates a img node	  mycurrent_image = document.createElement("img");	  mycurrent_image.setAttribute('src',"images/x11_close.gif");	  mycurrent_image.setAttribute('height', '23px');	  mycurrent_image.setAttribute('width', '24px');	  mycurrent_cell.appendChild(mycurrent_image);  // appends the cell <td> into the row <tr>	  mycurrent_row.appendChild(mycurrent_cell);  // appends the row <tr> into <tbody>	  mytablebody.appendChild(mycurrent_row);// create cell r2 c1	  mycurrent_row = document.createElement("tr"); // creates a <tr> element r1  // creates a <td> element	  mycurrent_cell = document.createElement("td");	  mycurrent_cell.setAttribute("colspan", "2");	  mycurrent_cell.setAttribute("top", "24px");  // add text to r2.	  newText=document.createTextNode(objText);	  mycurrent_cell.appendChild(newText);	  // appends the cell <td> into the row <tr>	  mycurrent_row.appendChild(mycurrent_cell); 	  // appends the cell <td> into the row <tr>	  mycurrent_row.appendChild(mycurrent_cell);	  // appends the row <tr> into <tbody>	  mytablebody.appendChild(mycurrent_row);	  // appends <tbody> into <table>	  mytable.appendChild(mytablebody);	  // appends <table> into <body>	  mybody.appendChild(mytable); 	  // sets the border attribute of mytable to 2;	  mytable.setAttribute("border", "2px");} </script>

Link to comment
Share on other sites

I believe you only set the height of the tr, not the td. The td will expand to fill the tr, and it will expand to fit the content if necessary. The code is post 3 works because the div inside the td is small enough that it doesn't need to expand further. The above code doesn't do the same thing, so it's going to expand to fit the text.

Link to comment
Share on other sites

I believe you only set the height of the tr, not the td. The td will expand to fill the tr, and it will expand to fit the content if necessary. The code is post 3 works because the div inside the td is small enough that it doesn't need to expand further. The above code doesn't do the same thing, so it's going to expand to fit the text.
That's my question - how do I put it all together?
Link to comment
Share on other sites

ok, that got me part way, but even though the cell is the correct size, the text overruns the cell out the bottom and holds the correct width.

// create cell r2 c1  mycurrent_row = document.createElement("tr"); // creates a <tr> element r1  mycurrent_row.setAttribute("height", "277px");   // creates a <td> element  mycurrent_cell = document.createElement("td");  mycurrent_cell.setAttribute("colspan", "2");  mycurrent_cell.setAttribute("top", "24px");   // appends the cell <td> into the row <tr>  mycurrent_row.appendChild(mycurrent_cell);  // append the <div> to the cell <td>  mycurrent_cell.appendChild(mydiv);  // add text to r2.  newText=document.createTextNode(objText);  mydiv.appendChild(newText);

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...