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

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

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...

Neat as always Ess.

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

Airshow

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

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

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... :)

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

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..!!

This article has been dead for over six months. Start a new discussion instead.