Creating table dynamically

Question

rp_prasanna 0 Newbie Poster

15 Years Ago

Hi friends,
I am able to create a row dynamically with 3 cells(i.e column).
In my 3rd cell i need to add another row. Is it possible to acheive it. I am using Java script for it.
This is the table structure:

<table align="center" id="msgfield" width="100%" cellpadding="1" cellspacing="0" border="1"   bordercolorlight="#999999" bordercolordark="#FFFFFF" bordercolor="black">
								
								<tr class="tableDataTextStyle">
									<td width="15%">
										<html:text property="alertFieldName" styleClass="textBoxStyle" size="12" maxlength="50" readonly="<%=readOnly%>"/>
									</td>
									<td width="15%">
										<html:text property="alertFieldStartPos" styleClass="textBoxStyle" size="12" maxlength="50" readonly="<%=readOnly%>"/>
									</td>
									<td width="13%">
										<html:text property="alertFieldLength" styleClass="textBoxStyle" size="10" maxlength="50" readonly="<%=readOnly%>"/>
									</td>
									<td width="35%">
										<table align="center" width="100%" cellpadding="1" cellspacing="0" border="0">
											<tr class="tableDataTextStyle">
												<td>
													<html:select property="alertFieldFormat" onchange="selectFormat();" styleClass="tableDataTextStyle1">
														<html:option value="">Select</html:option>
														<html:option value="Decimal">Decimal</html:option>
														<html:option value="Masking">Masking</html:option>
														<html:option value="Date">Date</html:option>
													</html:select>
													
											</tr>
										</table>
										<table id="decimal" width="100%" border="0">		
											<tr  class="tableDataTextStyle">
												<td>Decimal Point </td>
												<td><html:text property="alertFieldLength" styleClass="textBoxStyle" size="10" maxlength="50" readonly="<%=readOnly%>"/></td>
											</tr>
											<tr  class="tableDataTextStyle">
											<td>Decimal Format</td>
												<td>
													<html:select property="alertFieldFormat" styleClass="tableDataTextStyle1">
														<html:option value="">Select</html:option>
													</html:select>
												</td>
											</tr>
										</table>
										<table id="masking" width="100%" border="0">		
											<tr  class="tableDataTextStyle">
												<td>Masking Text </td>
												<td><html:text property="alertFieldLength" styleClass="textBoxStyle" size="10" maxlength="50" readonly="<%=readOnly%>"/></td>
											</tr>
											<tr  class="tableDataTextStyle">
											<td>Mask Position</td>
												<td>
													<html:select property="alertFieldFormat" styleClass="tableDataTextStyle1">
														<html:option value="">Select</html:option>
														<html:option value="L">Left</html:option>
														<html:option value="R">Right</html:option>
													</html:select> 
													<html:text property="alertFieldLength" styleClass="textBoxStyle" size="1"  readonly="<%=readOnly%>"/>
												</td>
											</tr>
										</table>
										<table id="date" width="100%" border="0">		
											<tr  class="tableDataTextStyle">
												<td>Source Format </td>
												<td><html:text property="alertFieldLength" styleClass="textBoxStyle" size="10" maxlength="50" readonly="<%=readOnly%>"/></td>
											</tr>
											<tr  class="tableDataTextStyle">
											<td>Output Format</td>
												<td>
													<html:text property="alertFieldLength" styleClass="textBoxStyle" size="10" maxlength="50" readonly="<%=readOnly%>"/>
												</td>
											</tr>
										</table>

javascript

2 Contributors
10 Replies
224 Views
3 Days Discussion Span
Latest Post 15 Years Ago Latest Post by rp_prasanna

essential 84 Posting Shark

15 Years Ago

Try this code when you are creating dynamic table :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<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">
<meta http-equiv="Window-target" content="_top">
<title>Free Live Help!</title>
<style type="text/css">
<!--
div#main {
   background-color : #eee;
   border : 1px solid #aaa;
   width : 100%;
   padding : .500em;
   margin : 0 auto; }
table {
  /* border-collapse : collapse; */
   width : 100%;
   margin : 0;
   padding : 0;
   border : none;
   color : #405060; }

td {
   letter-spacing : 3px;
   color : #708090;
   text-align : center;
   width : auto;
   background-color : #f0f0f0;
   border : 1px solid #ddd;
   padding : .300em;
 }
-->
</style>
<script type="text/javascript">
<!--
var dynamic = ( function( ids ) {
var ie = ( !!document.all );
var modern = ( document.getElementById );
var div = null || (( ie && !!!modern ) ? document.all[ ids ] : (( !!modern ) ? document.getElementById( ids ) : 0 ));
var count = 1;
   if ( document.createElement ) {
   var addRow = ( function( row, text, elem ) {
   var xRow = row.insertCell( -1 );
      if ( arguments.length > 2 ) {
      xRow.appendChild( elem )
      return;
      } xRow.appendChild( document.createTextNode( text ));
   } ); 
   var addElement = ( function( element ) {
      var element = document.createElement( element );
      return (( element ) ? element : 0 );
   } );
   var table = addElement( "table" );
   var tHead = table.createTHead();
   var tRow = tHead.insertRow( -1 );
   var tLabel = [ "R#", "C#", "C#", "C#", "C#", "C#" ];
   var tLen = tLabel.length;
      for ( x = 0; x < tLen; x++ ) {
         addRow( tRow, tLabel[ x ] );
      } delete x;
   var tBody = addElement( "tbody" );
   table.appendChild( tBody );
      for ( x = 0; x < tLen; x++ ) {
   tRow = tBody.insertRow( -1 );
      addRow( tRow, count );
        for ( i = 0; i < (( tLen ) - 1 ); i++ ) {
        addRow( tRow, "R{"+ count + "} C{" + (( i ) + 1 ) + "}") ; 
        } count++;
      } delete x; 
    div.appendChild( table );
   return;
   } alert( "Please update your browser with the latest patch", "unsupported feature" );
} );
onload = function() {
dynamic( "main" );
}
// -->
</script>
</head>
<body>
<div id="main"></div>
</body>
</html>

essential

essential 84 Posting Shark

15 Years Ago

Hi,

if you need to add new element inside the table, simply insert new line of this:

// Adding new row
var newRow = tBody.insertRow( -1 ); // This will automatically add new row inside the table.
// Adding new cell on newly created row
// you can try to perform a new loop procedure.
for ( var n = 0; n < tLen; n++ ) {
addRow( newRow, "new Text #" + n );
} // Loop ended
 
// Adding new cell on a target row.

var r1 = tBody.rows[1 /* row index */];
r1.insertCell( -1 ).appendChild( document.createTextNode( "R{1} C{" + r1.cells.length + "}"));

make sure that when you add new bits of code, it is outside of the two loop that i've provided on this demo.

Hope it helps...

essential 84 Posting Shark

15 Years Ago

Inserting a new table-row inside a table-cell is not a legal move. Instead you can create a new table collection inside the table-cell of your choice:

// Refer on created elements inside the table.

var row1cell1 = table.rows[ 1 ].cells( 1 ); //R1C1

var row1cell2 = table.rows[ 1 ].cells( 2 ); //R1C2

// Append a new table inside R1C1
var newTable = addElement("table");
row1cell1.appendChild(newTable);
// But doing so, will require new implemeations over the created table-body.

// declare a collection of elements' for the new table-body 
var newTbody = addElement("tbody")

newTable.appendChild( newTbody );

var newRow = newTbody.insertRow(-1);
   for ( i = 0; i < yourNumberOfCell; i++ ) {
addRow( newRow, "new Cell" );
} // and so on...

// change the content of the text inside R1C2

row1cell2.innerHTML = "Change Text";

NOTE: that nesting table inside another table is not implemented in W3C standards for web structure

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.

rp_prasanna 0 Newbie Poster · Answer 1 · 2009-07-27T14:18:28+00:00

Try this code when you are creating dynamic table :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<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">
<meta http-equiv="Window-target" content="_top">
<title>Free Live Help!</title>
<style type="text/css">
<!--
div#main {
   background-color : #eee;
   border : 1px solid #aaa;
   width : 100%;
   padding : .500em;
   margin : 0 auto; }
table {
  /* border-collapse : collapse; */
   width : 100%;
   margin : 0;
   padding : 0;
   border : none;
   color : #405060; }

td {
   letter-spacing : 3px;
   color : #708090;
   text-align : center;
   width : auto;
   background-color : #f0f0f0;
   border : 1px solid #ddd;
   padding : .300em;
 }
-->
</style>
<script type="text/javascript">
<!--
var dynamic = ( function( ids ) {
var ie = ( !!document.all );
var modern = ( document.getElementById );
var div = null || (( ie && !!!modern ) ? document.all[ ids ] : (( !!modern ) ? document.getElementById( ids ) : 0 ));
var count = 1;
   if ( document.createElement ) {
   var addRow = ( function( row, text, elem ) {
   var xRow = row.insertCell( -1 );
      if ( arguments.length > 2 ) {
      xRow.appendChild( elem )
      return;
      } xRow.appendChild( document.createTextNode( text ));
   } ); 
   var addElement = ( function( element ) {
      var element = document.createElement( element );
      return (( element ) ? element : 0 );
   } );
   var table = addElement( "table" );
   var tHead = table.createTHead();
   var tRow = tHead.insertRow( -1 );
   var tLabel = [ "R#", "C#", "C#", "C#", "C#", "C#" ];
   var tLen = tLabel.length;
      for ( x = 0; x < tLen; x++ ) {
         addRow( tRow, tLabel[ x ] );
      } delete x;
   var tBody = addElement( "tbody" );
   table.appendChild( tBody );
      for ( x = 0; x < tLen; x++ ) {
   tRow = tBody.insertRow( -1 );
      addRow( tRow, count );
        for ( i = 0; i < (( tLen ) - 1 ); i++ ) {
        addRow( tRow, "R{"+ count + "} C{" + (( i ) + 1 ) + "}") ; 
        } count++;
      } delete x; 
    div.appendChild( table );
   return;
   } alert( "Please update your browser with the latest patch", "unsupported feature" );
} );
onload = function() {
dynamic( "main" );
}
// -->
</script>
</head>
<body>
<div id="main"></div>
</body>
</html>

essential

The code which u given will work fine. Let us take an example.In
the cell R{1} C{1} if i want to add a row (ie another table's row)..
is it possible

rp_prasanna 0 Newbie Poster · Answer 2 · 2009-07-27T17:35:20+00:00

the piece of code creates an extra cell an a row ... but i am trying to add a new row in a single cell (column ) I am trying to acheive a table with two rows in a column

rp_prasanna 0 Newbie Poster · Answer 3 · 2009-07-28T15:00:17+00:00

hi,
the code is working fine. now when creating a new cell, for e.g in colunm R{1},c{1} if i want to add some styles for the column like
valign='top' how do i acheive it

essential 84 Posting Shark Featured Poster · Answer 4 · 2009-07-28T15:58:41+00:00

You can keep the same instance of my last posted code: var r1c1 = table.rows[1].cells( 1 ).style.backgroundColor = "wheat"; or if you just want to apply all the style rules in a single stance:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>http://www.daniweb.com</title>
<script type="text/javascript">
<!--
var dynamic = ( function( ids ) {
var ie = ( !!document.all );
var modern = ( document.getElementById );
var div = null || (( ie && !!!modern ) ? document.all[ ids ] : (( !!modern ) ? document.getElementById( ids ) : 0 ));
var isLen = 5;
var count = 1;
   if ( document.createElement ) {
   var addRow = ( function( row, text, elem ) {
   var xRow = row.insertCell( -1 );
      if ( arguments.length > 2 ) {
      xRow.appendChild( elem )
      return;
      } xRow.appendChild( document.createTextNode( text ));
   } ); 
   var addElement = ( function( element ) {
      var element = document.createElement( element );
      return (( element ) ? element : 0 );
   } );
   var table = addElement( "table" );
   var tHead = table.createTHead();
   var tRow = tHead.insertRow( -1 );
   var tLabel = [ "R#", "C#", "C#", "C#", "C#", "C#" ];
   var tLen = tLabel.length;
      for ( x = 0; x < tLen; x++ ) {
         addRow( tRow, tLabel[ x ] );
      } delete x;
   var tBody = addElement( "tbody" );
   table.appendChild( tBody );
      for ( x = 0; x < tLen; x++ ) {
   tRow = tBody.insertRow( -1 );
      addRow( tRow, count );
        for ( i = 0; i < (( tLen ) - 1 ); i++ ) {
      addRow( tRow, "R{"+ count + "} C{" + (( i ) + 1 ) + "}") ; 
        } count++;
      } delete x; delete i;
    tRow = table.rows;
    var tCell;
   for ( x = 0; x < tRow.length; x++ ) {
   tCell = tRow[ x ].cells;
      for ( i = 0; i < tCell.length; i++ ) {
// [b]Add More Style >>>[/b]
      tCell( i ).style.backgroundColor = "wheat";
      tCell( i ).style.color = "grey";
      tCell( i ).style.padding = ".500em";
      tCell( i ).style.textAlign = "center";
      tCell( i ).style.border = "1px solid grey";

// [b]Add More Style <<<[/b] 
      }
   } table.width = "100%"
    div.appendChild( table );
   return;
   } alert( "Please update your browser with the latest patch", "unsupported feature" );
} );
onload = function() {
dynamic( "main" );
}
// -->
</script>
</head>
<body>
<div id="main"></div>
</body>
</html>

essential

rp_prasanna 0 Newbie Poster · Answer 5 · 2009-07-29T10:54:33+00:00

the style is working fine. I tried adding an onclick event to a cell like
oCell.onclick.action="removeRow()";
and i also tried
oCell.onclick.innerHtml="removeRow()";

can u suggest some solution for this

essential 84 Posting Shark Featured Poster · Answer 6 · 2009-07-29T13:57:26+00:00

Use this format:

// Table Row (Range 1);
var row1 = table.rows[ 1 ];

// installing onclick event in cell1 inside row1.

row1.cells( 1 ).onclick = function() {

// use this format if you want to change the text content of this cell.

/* 
this.innerHTML = "<b>Remove</b>"; // using innerHTML method.
or 

this.innerText = "Remove"; // using innerText method
*/
 
// Removing cell 1 in row 1 

row1.deleteCell( this.cellIndex ) || row1.removeChild( this ); 
};

rp_prasanna 0 Newbie Poster · Answer 7 · 2009-07-30T11:25:16+00:00

i have a text box

<html:text property="msgfield" ></html:text>

if i want to get the value of the struts html textbox using javascript how to acheive it