how to create two tags in One Cell..!!

Question

nish123 0 Junior Poster in Training

15 Years Ago

hello frndz..

i have a function in javascript to add new cell in a table...!! tht work perfectly but now i want to create a span tag within cell tag..!!

var cellLeft = row.insertCell(3);
   chbk1.id = 'change'+iteration;
  var chbk = document.createElement('input');
  chbk.type = 'button';
  chbk.name = 'button';
   chbk.value = 'Add Items';

this will create a new cell in last row... i want to create a span tag also.. within new cell..!!

it will look like this

<td><span id='hi'>Hello</span></td>

any help will appriciated..!! :D

javascript

3 Contributors
10 Replies
145 Views
4 Days Discussion Span
Latest Post 15 Years Ago Latest Post by nish123

Airshow 416 WiFi Lounge Lizard

15 Years Ago

Nish,

Assuming row to be defined earlier as per your own code, try this :

var cell = row.insertCell(0);//::Change index as appropriate
	var span = document.createElement('span');//Creates a span element
	var txt = document.createTextNode('Hello');//Creates a text node saying Hello.
	span.appendChild(txt);//Sticks the text in the span
	cell.appendChild(span);//Sticks the span in the cell

Or the shorthand method:

var cell = row.insertCell(0);//::Change index as appropriate
	cell.innerHTML = "<span>Hello!</span>";

Airshow

essential 84 Posting Shark

15 Years Ago

Sorry again Airshow i've been done doing this, i thought that no one would want to post here.

So here is it and throwing out things.

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-Target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style id="css21" type="text/css" media="screen">
/* <![CDATA[ */
.hide { display : none; }
.show { display : block; }
/* ]]> */
</style> 
<script type="text/javascript">
// <![CDATA[
var insertSpan = function() {
  var myTable = (( "getElementById" in document ) ? document.getElementById("table") : document.all.table );
  var myRow = myTable.rows;
  myTable.insertRow( 1 );
  for ( var x = 0; x < myRow[ 0 ].cells.length; x++ ) {
  myRow[ 1 ].insertCell( x );
  myRow[ 1 ].cells( x ).align = "center";
  var span = document.createElement("span");
  span.appendChild( document.createTextNode( "Row2 CELL #" + (( x ) + 1 ) + " w/ span #" + (( x ) + 1 )));
  var normalizedCells = document.createDocumentFragment();
  normalizedCells.appendChild( span );
   myRow[ 1 ].cells( x ).appendChild( normalizedCells );
   }

};

window.onload = insertSpan;
// ]]>
</script>
</head>
<body>
<div id="main">
<table id="table" cellspacing="4" cellpadding="4" border="2" frame="border" rules="all" summary="test :: table" width="80%">
<caption>Dynamic Table</caption>
<tr>
<td align="center">Row1 CELL #1</td>
<td align="center">Row1 CELL #2</td>
<td align="center">Row1 CELL #3</td></tr>
</table>
</div>
</body>
</html>

hope we've both claim your need...

Airshow 416 WiFi Lounge Lizard

15 Years Ago

Neat as always Ess.

Can you explain var normalizedCells = document.createDocumentFragment(); please.

Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 1 · 2009-06-20T20:11:45+00:00

Ess, for some reason your insetSpan() works in IE but not FF (3.0.11 as of earlier today), though it's not clear why.

I messed around with it and ended up with this, which works in IE6 and FF 3.0.11 .

var insertSpan = function() {
  var myTable = (( "getElementById" in document ) ? document.getElementById("table") : document.all.table );
  var protoRow = myTable.rows[0];
  var myRow = myTable.insertRow(1);
  var cell;
  for(var i=0; i<protoRow.cells.length; i++) {
    cell = myRow.insertCell(i);
    cell.align = "center";
    var span = document.createElement("span");
    span.appendChild( document.createTextNode( "Row2 CELL #" + ((i) + 1 ) + " w/ span #" + ((i) + 1 )));
    var normalizedCells = document.createDocumentFragment();
    normalizedCells.appendChild( span );
    cell.appendChild( span );
  }
};

I think it's to do with putting the prototype row (protoRow) "in the bank" before creating the new row.

Still not understanding createDocumentFragment(); , which is completely new to me.

Airshow

essential 84 Posting Shark Featured Poster · Answer 2 · 2009-06-20T22:15:39+00:00

Hi Airshow,

You know me buddy, am not really good on explaining things ( due for my bad english ), so id rather provide brief examples than doing brief explainations of my work.

The DocumentFragment() inherits from the Node and is a lightweight version of the Document interface intended for temporary storage of the DOM structures. It can be used for temporary canvas for building a group of Nodes, or to store a group of Nodes while moving it from one part of a document to another. DocumentFragment is a virtual construct, and never actually appears in the document.

Hope i provide you the juice out of it, in my short definition of terms ragarding the DocumentFragment() interface...

essential

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 3 · 2009-06-21T01:22:14+00:00

Thanks Ess, that's perfect. I'm sure I'll use DocumentFragment() some time soon.

Airshow

essential 84 Posting Shark Featured Poster · Answer 4 · 2009-06-21T01:28:57+00:00

How i wish im good on using/understanding your language( english ) so that i can provide more precission in my codes, like you always do Airshow. That's really one big gap between the codes i supplied with the poster, for not understang their issue... :)

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 5 · 2009-06-21T02:45:45+00:00

How i wish im good on using/understanding your language( english ) so that i can provide more precission in my codes, like you always do Airshow.

You have my admiration Ess. In any other language, I could not participate.

Airshow

nish123 0 Junior Poster in Training · Answer 6 · 2009-06-24T13:40:30+00:00

nish123 0 Junior Poster in Training

15 Years Ago

nice

nish123 0 Junior Poster in Training · Answer 7 · 2009-06-24T13:41:31+00:00

Nish,

Assuming row to be defined earlier as per your own code, try this :

var cell = row.insertCell(0);//::Change index as appropriate
	var span = document.createElement('span');//Creates a span element
	var txt = document.createTextNode('Hello');//Creates a text node saying Hello.
	span.appendChild(txt);//Sticks the text in the span
	cell.appendChild(span);//Sticks the span in the cell

Or the shorthand method:

var cell = row.insertCell(0);//::Change index as appropriate
	cell.innerHTML = "<span>Hello!</span>";

Airshow

okay... i have done the same before... but i got problem because it create the span tag but didnt ends the span tag..!!

i want output like this--

textbox1 | textbox2 | Add New Item button

onclick of Add New Item.. Row Will Append with Add New Button and in previous place Edit and Delete Button will come..!!

After Click Button Output looks like this--

textbox1 | textbox2 | Edit Remove
textbox1 | textbox2 | Add New Item button

and this happen everytime..!!