0

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>
2
Contributors
10
Replies
13
Views
8 Years
Discussion Span
Last Post by rp_prasanna
0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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 ); 
};
0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.