Page 1 of 2 12 LastLast
Results 1 to 10 of 17

Thread: Adding and Deleting table row style

  1. #1
    Join Date
    Feb 2008
    Posts
    74
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Question Adding and Deleting table row style

    I currently have a script that adds and deletes table rows. However, I do not know how to change the code to make the new rows have the same style as the default row (the row style id needed to add is named "even" which shows the grey border etc...). Does anyone know how to make this change?

    Code:
    <html>
    	<head>
    		<title>Adding and Removing Rows from a table using DHTML and JavaScript</title>
    		<script language="javascript">
    		
    			//add a new row to the table
    			function addRow()
    			{
    				//add a row to the rows collection and get a reference to the newly added row
    				var newRow = document.all("tblGrid").insertRow();
    				
    				//add 3 cells (<th>) to the new row and set the innerHTML to contain text boxes
    				
    				var oCell = newRow.insertCell();
    				oCell.innerHTML = "<input type='text' name='t1'>";
    				
    				oCell = newRow.insertCell();
    				oCell.innerHTML = "<input type='text' name='t2'>";
    				
    				oCell = newRow.insertCell();
    				oCell.innerHTML = "<span style='text-align:center'><input type='text' name='t3'></span>";	
    				
    				oCell = newRow.insertCell();
    				oCell.innerHTML = "<input type='button' value='Delete' onclick='removeRow(this);'/>";			
    			}
    			
    			//deletes the specified row from the table
    			function removeRow(src)
    			{
    				/* src refers to the input button that was clicked.	
    				   to get a reference to the containing <tr> element,
    				   get the parent of the parent (in this case case <tr>)
    				*/			
    				var oRow = src.parentElement.parentElement;		
    				
    				//once the row reference is obtained, delete it passing in its rowIndex			
    				document.all("tblGrid").deleteRow(oRow.rowIndex);		
    			}
    		
    		</script>
    		<style>
    		/*---------------------------------*/
    /*      Table Grid     */
    /*---------------------------------*/
    
    /* The initial default settings for the Table */
    table.grid {
    	width: 100%;
    	height: 20px;
    	border: 1px solid #6688A4;
    	border-collapse: collapse;
    }
    
    /* Style for the title header of the table */
    tr#header {
    	border-bottom: 1px solid #6688A4;
    	background-color: #6688A4;
    	color: #FFFFFF;
    	font-family: Arial;
    	font-weight: bold;
    	font-size: 11px;
    	padding-left: 0px;
    	height: 20px;
    }
    
    tr#header th{
    	padding-left: 12px;
    	color: #FFFFFF;
    	font-family: arial;
    	font-size: 11px;
    	text-align: left;
    }
    
    
    /* Style for the row containing the MAIN PARAMETERS for the table (row after the Title row) */
    tr#mainDiv {
    	background-color: #CCCCCC;
    	color: #000;
    	border-top: 1px solid #FFFFFF;
    	border-left: 1px solid #6688A4;
    	border-right: 1px solid #6688A4;
    	height: 18px;
    }
    
    tr#mainDiv th{
    	text-align: center;
    	font-family: arial;
    	font-size: 11px;
    	font-weight: normal;
    	border-top: 1px solid #FFFFFF;
    	border-left: 1px solid #FFFFFF;
    	border-right: 1px solid #FFFFFF;
    }
    
    
    
    /* Style for the EVEN data rows with the white background */
    tr#even {
    	background-color: #FFFFFF;
    	border-left: 1px solid #6688A4;
    	border-right: 1px solid #6688A4;
    	height: 28px;
    }
    
    tr#even th{
    	padding-left: 5px;
    	color: #333333;
    	font-family: arial;
    	font-size: 11px;
    	font-weight:normal;
    	text-align: left;
    	padding-right: 5px;
    	border: 1px solid #E6E6E6;
    }
    
    tr#even th#yr{
    	text-align: center;
    }
    
    tr#even th#inc{
    	color: #008000;
    }
    
    tr#even th#dec{
    	color: #EF0303;
    }
    
    
    
    
    
    
    
    		</style>
    	</head>
    	<body>
    		Demo of a simple table grid that allows adding and deleting rows using DHTML 
    		and Javascript 
    		<p/>
    		Try it out - Click on the Delete button to delete the corresponding row. Click Add Row button to insert a new row.
    		<p/>
    		<p/>Browser compatility - this sample has been tested to work with IE5.0 and above.
    		<p/>
    		
    		<input type="button" value="Add Row" onClick="addRow();" />
    		<hr>
    		<!-- sample table grid with 3 columns and 4 rows that are presented by default -->
    		<table class="grid" id="tblGrid" style="table-layout:fixed" border="0">
    			<tr id="mainDiv">
    				<th width="150px">Field1</th>
    				<th width="150px">Field2</th>
    				<th width="250px">Field3</th>
    				<th width="250px">Action</th>
    			</tr>
    			<tr id="even">
    				<th><input type="text" name="t1" /></th>
    				<th><input type="text" name="t2" /></th>
    				<th><input type="text" name="t3" /></th>
    				<th><input type="button" value="Delete" onClick="removeRow(this);" /></th>
    			</tr>
    			
    		</table>
    		<hr>
    		
    	</body>
    </html>
    Last edited by Snookerman; 04-23-2009 at 05:38 PM. Reason: added “Resolved” prefix

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Technically speaking, and for most practical purposes in javascript, you may only have one element per page with a given id. Style may also be imparted using a class name. In javascript, the way to assign a class name is via the element's className property.

    Now, since (from what you say, without dissecting your javascript code, it looks like) you are only assigning the id for style purposes, you might be able to get away with something like so:

    Code:
    el.id='even';
    where el represents a variable that references the element you want to assign the id to. That would respond to a selector in your stylesheet like:

    Code:
    #even {
    property/value pairs here
    }
    But even so it is technically invalid, so some browsers may not allow it. If on the other hand, after assigning the id 'even' to more than one element, you try to access that element via javascript using its id as a reference, that will certainly fail. In javascript, each element must have a unique id, or no id.

    To assign a class name of 'even', use:

    Code:
    el.className='even';
    Then that element (and all elements with that class name) will respond to style in your stylesheet selected like so:

    Code:
    .even {
    property/value pairs here
    }
    You may have any number of elements on a page with the same class name.

    Edit: For more info on practical ways to do this see this thread:
    http://www.dynamicdrive.com/forums/s...404#post141404
    Last edited by jscheuer1; 05-02-2008 at 12:51 AM. Reason: add link to more info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Yes, John had explained regarding ID's VS. Classes

    ...NOw i'll go ahead for things that are erroneous. Your example code does'nt work.

    ...Also, the p tag closes with a slash in the front and not in the back (<p/>)

    ...width is a deprecated attribute

    ...Here's your code...with a number of changes:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <title>Adding and Removing Rows from a table using DHTML and JavaScript
    		</title>
            <script language="javascript">
    
                //add a new row to the table
                function addRow()
                {
                    //add a row to the rows collection and get a reference to the newly added row
                    var newRow = document.getElementById("tblGrid").insertRow(-1);
    
                    newRow.className = "even";
                    //add 3 cells (<th>) to the new row and set the innerHTML to contain text boxes
    
                    var oCell = newRow.insertCell(-1);
                    oCell.innerHTML = "<input type='text' name='t1'>";
    
                    oCell = newRow.insertCell(-1);
                    oCell.innerHTML = "<input type='text' name='t2'>";
    
                    oCell = newRow.insertCell(-1);
                    oCell.innerHTML = "<span style='text-align:center'><input type='text' name='t3'></span>";
    
                    oCell = newRow.insertCell(-1);
                    oCell.innerHTML = "<input type='button' value='Delete' onclick='removeRow(this);'/>";
    
                }
    
                //deletes the specified row from the table
                function removeRow(src)
                {
                    /* src refers to the input button that was clicked.
                       to get a reference to the containing <tr> element,
                       get the parent of the parent (in this case case <tr>)
                    */
                    var oRow = src.parentNode.parentNode;
    
                    //once the row reference is obtained, delete it passing in its rowIndex
                    document.getElementById("tblGrid").deleteRow(oRow.rowIndex);
    
                }
    
            </script>
            <style>
            /*---------------------------------*/
    /*      Table Grid     */
    /*---------------------------------*/
    
    /* The initial default settings for the Table */
    table.grid {
        width: 100%;
        height: 20px;
        border: 1px solid #6688A4;
        border-collapse: collapse;
    }
    
    /* Style for the title header of the table */
    tr#header {
        border-bottom: 1px solid #6688A4;
        background-color: #6688A4;
        color: #FFFFFF;
        font-family: Arial;
        font-weight: bold;
        font-size: 11px;
        padding-left: 0px;
        height: 20px;
    }
    
    tr#header th{
        padding-left: 12px;
        color: #FFFFFF;
        font-family: arial;
        font-size: 11px;
        text-align: left;
    }
    
    
    /* Style for the row containing the MAIN PARAMETERS for the table (row after the
     Title row) */
    tr#mainDiv {
        background-color: #CCCCCC;
        color: #000;
        border-top: 1px solid #FFFFFF;
        border-left: 1px solid #6688A4;
        border-right: 1px solid #6688A4;
        height: 18px;
    }
    
    tr#mainDiv th{
        text-align: center;
        font-family: arial;
        font-size: 11px;
        font-weight: normal;
        border-top: 1px solid #FFFFFF;
        border-left: 1px solid #FFFFFF;
        border-right: 1px solid #FFFFFF;
    }
    
    
    
    /* Style for the EVEN data rows with the white background */
    tr.even {
        background-color: #FFFFFF;
        border-left: 1px solid #6688A4;
        border-right: 1px solid #6688A4;
        height: 28px;
    }
    tr.even th,tr.even td{
        padding-left: 5px;
        color: #333333;
        font-family: arial;
        font-size: 11px;
        font-weight:normal;
        text-align: left;
        padding-right: 5px;
        border: 1px solid #E6E6E6;
    }
    
    tr.even th#yr{
        text-align: center;
    }
    
    tr.even th#inc{
        color: #008000;
    }
    
    tr.even th#dec{
        color: #EF0303;
    }
    </style>
    </head>
        <body>
    	<p>
            Demo of a simple table grid that allows adding and deleting rows using D
    HTML
            and Javascript
            </p>
    		<p>
            Try it out - Click on the Delete button to delete the corresponding row.
     Click Add Row button to insert a new row.
            </p>
            <p>Browser compatility - this sample has been tested to work with IE5.0
     and above.
            </p>
    
            <input type="button" value="Add Row" onClick="addRow();" />
            <hr>
            <!-- sample table grid with 3 columns and 4 rows that are presented by d
    efault -->
            <table class="grid" id="tblGrid" style="table-layout:fixed" border="0">
                <tr id="mainDiv">
                    <th style="width:150px;">Field1</th>
                    <th style="width:150px;">Field2</th>
                    <th style="width:250px;">Field3</th>
                    <th style="width:250px;">Action</th>
                </tr>
                <tr class="even">
                    <th><input type="text" name="t1" /></th>
                    <th><input type="text" name="t2" /></th>
                    <th><input type="text" name="t3" /></th>
                    <th><input type="button" value="Delete" onClick="removeRow(this);" /></th>
    </tr>
    </table>
    <hr>
    
        </body>
    </html>
    See if it helps
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  4. The Following User Says Thank You to rangana For This Useful Post:

    bigalo (05-02-2008)

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Pretty good rangana! One really should use the DOM to create and insert the inputs, etc. to the cells though.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #5
    Join Date
    Feb 2008
    Posts
    74
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default

    Thank you rangana for your help! Just so you know, this was not my script. I truly know how to code html tags Thanks to you both the script works great!

  7. #6
    Join Date
    Feb 2008
    Posts
    74
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default

    Hi rangana,

    I have another request if you don't mind. I would like to add a new column on the far left to incorporate the row count (1, 2, 3, ect...) also, I would like to have a Totals footer row appear once the 1st row is added as well as it dissapear if all the rows are deleted. Is that possible?

    Code:
    <html>
    	<head>
    		<title>Adding and Removing Rows from a table using DHTML and JavaScript</title>
    		    <script language="JavaScript" type="text/javascript">
    
                //add a new row to the table
                function addRow()
                {
                    //add a row to the rows collection and get a reference to the newly added row
                    var newRow = document.all("tblGrid").insertRow(-1);
    
                    newRow.className = "even";
                    //add 3 cells (<th>) to the new row and set the innerHTML to contain text boxes
    
                    var  oCell = newRow.insertCell(-1);
                    oCell.innerHTML = "1";
    				
    				oCell = newRow.insertCell(-1);
                    oCell.innerHTML = "<input type='text' name='t1'>";
    
                    oCell = newRow.insertCell(-1);
                    oCell.innerHTML = "<input type='text' name='t2'>";
    
                    oCell = newRow.insertCell(-1);
                    oCell.innerHTML = "<span style='text-align:center'><input type='text' name='t3'></span>";
    
                    oCell = newRow.insertCell(-1);
                    oCell.innerHTML = "<input type='button' value='Delete' onclick='removeRow(this);'/>";
    
                }
    
                //deletes the specified row from the table
                function removeRow(src)
                {
                    /* src refers to the input button that was clicked.
                       to get a reference to the containing <tr> element,
                       get the parent of the parent (in this case case <tr>)
                    */
                    var oRow = src.parentElement.parentElement;
    
                    //once the row reference is obtained, delete it passing in its rowIndex
                    document.all("tblGrid").deleteRow(oRow.rowIndex);
    
                }
    
            </script>
    		<style>
    		/*---------------------------------*/
    /*      Table Grid     */
    /*---------------------------------*/
    
    /* The initial default settings for the Table */
    table.grid {
    	width: 100%;
    	height: 20px;
    	border: 1px solid #6688A4;
    	border-collapse: collapse;
    }
    
    /* Style for the title header of the table */
    tr#header {
    	border-bottom: 1px solid #6688A4;
    	background-color: #6688A4;
    	color: #FFFFFF;
    	font-family: Arial;
    	font-weight: bold;
    	font-size: 11px;
    	padding-left: 0px;
    	height: 20px;
    }
    
    tr#header th{
    	padding-left: 12px;
    	color: #FFFFFF;
    	font-family: arial;
    	font-size: 11px;
    	text-align: left;
    }
    
    
    /* Style for the row containing the MAIN PARAMETERS for the table (row after the Title row) */
    tr#mainDiv {
    	background-color: #CCCCCC;
    	color: #000;
    	border-top: 1px solid #FFFFFF;
    	border-left: 1px solid #6688A4;
    	border-right: 1px solid #6688A4;
    	height: 18px;
    }
    
    tr#mainDiv th{
    	text-align: center;
    	font-family: arial;
    	font-size: 11px;
    	font-weight: normal;
    	border-top: 1px solid #FFFFFF;
    	border-left: 1px solid #FFFFFF;
    	border-right: 1px solid #FFFFFF;
    }
    
    
    
    /* Style for the EVEN data rows with the white background */
    tr#even {
    	background-color: #FFFFFF;
    	border-left: 1px solid #6688A4;
    	border-right: 1px solid #6688A4;
    	height: 28px;
    }
    
    tr#even th,tr.even td{
    	padding-left: 5px;
    	color: #333333;
    	font-family: arial;
    	font-size: 11px;
    	font-weight:normal;
    	text-align: left;
    	padding-right: 5px;
    	border: 1px solid #E6E6E6;
    }
    
    tr#even th#yr{
    	text-align: center;
    }
    
    tr#even th#inc{
    	color: #008000;
    }
    
    tr#even th#dec{
    	color: #EF0303;
    }
    
    		</style>
    	</head>
    	<body>
    
    		
    		<input type="button" value="Add Row" onClick="addRow();" />
    		<hr>
    		<!-- sample table grid with 3 columns and 4 rows that are presented by default -->
    		<table class="grid" id="tblGrid" style="table-layout:fixed" border="0">
    			<tr id="mainDiv">
    				<th width="20px">Row</th>
    				<th width="150px">Field1</th>
    				<th width="150px">Field2</th>
    				<th width="250px">Field3</th>
    				<th width="250px">Action</th>
    			</tr>
    			<!--<tr id="even">
    				<th>1</th>
    				<th><input type="text" name="t1" /></th>
    				<th><input type="text" name="t2" /></th>
    				<th><input type="text" name="t3" /></th>
    				<th><input type="button" value="Delete" onClick="removeRow(this);" /></th>
    			</tr>
    			<tr id="even">
    				<th>&nbsp;</th>
    				<th>Total:</th>
    				<th><input type="text" name="t3" /></th>
    				<th><input type="text" name="t3" /></th>
    			</tr>-->
    		</table>
    		<hr>
    		
    	</body>
    </html>

  8. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Stop using innerHTML! If you ever use this code for real form data, you will have countless problems because of it.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #8
    Join Date
    Feb 2008
    Posts
    74
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    Stop using innerHTML! If you ever use this code for real form data, you will have countless problems because of it.
    What should I use in place of innerHTML?

  10. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Pure DOM methods:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <title>Adding and Removing Rows from a table using DHTML and JavaScript
    		</title>
            <script language="javascript">
            
                //add a Node
                function addNode(tag, dat, el){
                    
                  //create new node and get a reference to it
                  var newNode = document.createElement(tag);
                  
                  //add attributes to the node
                  for (var p in dat)
                    if(p == 'text')
                    newNode.appendChild(document.createTextNode(dat[p]));
                    else if(typeof dat[p] != 'object')
                    newNode[p] = dat[p];
                    else for (var sp in dat[p])
                    newNode[p][sp] = dat[p][sp];
                  
                  //return it, or if a parent 'el' is supplied append it to the parent and return the parent
                  if(!el) return newNode;
                  el.appendChild( newNode );
                  return el;
                }
    
                //add a new row to the table
                function addRow()
                {
                    //add a row to the rows collection and get a reference to the newly added row
                    var newRow = document.getElementById("tblGrid").insertRow(-1);
    
                    newRow.className = "even";
                    //add 4 cells (<td>) to the new row and populate them with elements
    
                    var oCell = newRow.insertCell(-1);
                    addNode('input', {type:'text', name:'t1'}, oCell);
    
                    oCell = newRow.insertCell(-1);
                    addNode('input', {type:'text', name:'t2'}, oCell);
    
                    oCell = newRow.insertCell(-1);
                    oCell.appendChild(addNode('input', {type:'text', name:'t3'}, addNode('span', {style:{textAlign:'center'}})));
    
                    oCell = newRow.insertCell(-1);
                    addNode('input', {type:'button', value:'Delete', onclick:function(){removeRow(this);}}, oCell);
    
                }
    
                //deletes the specified row from the table
                function removeRow(src)
                {
                    /* src refers to the input button that was clicked.
                       to get a reference to the containing <tr> element,
                       get the parent of the parent (in this case case <tr>)
                    */
                    var oRow = src.parentNode.parentNode;
    
                    //once the row reference is obtained, delete it passing in its rowIndex
                    document.getElementById("tblGrid").deleteRow(oRow.rowIndex);
    
                }
    
            </script>
            <style>
            /*---------------------------------*/
    /*      Table Grid     */
    /*---------------------------------*/
    
    /* The initial default settings for the Table */
    table.grid {
        width: 100%;
        height: 20px;
        border: 1px solid #6688A4;
        border-collapse: collapse;
    }
    
    /* Style for the title header of the table */
    tr#header {
        border-bottom: 1px solid #6688A4;
        background-color: #6688A4;
        color: #FFFFFF;
        font-family: Arial;
        font-weight: bold;
        font-size: 11px;
        padding-left: 0px;
        height: 20px;
    }
    
    tr#header th{
        padding-left: 12px;
        color: #FFFFFF;
        font-family: arial;
        font-size: 11px;
        text-align: left;
    }
    
    
    /* Style for the row containing the MAIN PARAMETERS for the table (row after the
     Title row) */
    tr#mainDiv {
        background-color: #CCCCCC;
        color: #000;
        border-top: 1px solid #FFFFFF;
        border-left: 1px solid #6688A4;
        border-right: 1px solid #6688A4;
        height: 18px;
    }
    
    tr#mainDiv th{
        text-align: center;
        font-family: arial;
        font-size: 11px;
        font-weight: normal;
        border-top: 1px solid #FFFFFF;
        border-left: 1px solid #FFFFFF;
        border-right: 1px solid #FFFFFF;
    }
    
    
    
    /* Style for the EVEN data rows with the white background */
    tr.even {
        background-color: #FFFFFF;
        border-left: 1px solid #6688A4;
        border-right: 1px solid #6688A4;
        height: 28px;
    }
    tr.even th,tr.even td{
        padding-left: 5px;
        color: #333333;
        font-family: arial;
        font-size: 11px;
        font-weight:normal;
        text-align: left;
        padding-right: 5px;
        border: 1px solid #E6E6E6;
    }
    
    tr.even th#yr{
        text-align: center;
    }
    
    tr.even th#inc{
        color: #008000;
    }
    
    tr.even th#dec{
        color: #EF0303;
    }
    </style>
    </head>
        <body>
    	<p>
            Demo of a simple table grid that allows adding and deleting rows using D
    HTML
            and Javascript
            </p>
    		<p>
            Try it out - Click on the Delete button to delete the corresponding row.
     Click Add Row button to insert a new row.
            </p>
            <p>Browser compatility - this sample has been tested to work with IE5.0
     and above.
            </p>
    
            <input type="button" value="Add Row" onClick="addRow();" />
            <hr>
            <!-- sample table grid with 3 columns and 4 rows that are presented by d
    efault -->
            <table class="grid" id="tblGrid" style="table-layout:fixed" border="0">
                <tr id="mainDiv">
                    <th style="width:150px;">Field1</th>
                    <th style="width:150px;">Field2</th>
                    <th style="width:250px;">Field3</th>
                    <th style="width:250px;">Action</th>
                </tr>
                <tr class="even">
                    <th><input type="text" name="t1" /></th>
                    <th><input type="text" name="t2" /></th>
                    <th><input type="text" name="t3" /></th>
                    <th><input type="button" value="Delete" onClick="removeRow(this);" /></th>
    </tr>
    </table>
    <hr>
    
        </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  11. #10
    Join Date
    Feb 2008
    Posts
    74
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default

    Thanks so much John! As you can see I am a total novice! Would you be able to help with my code change request using updated version?

    Request:
    I would like to add a new column on the far left to incorporate the row count (1, 2, 3, ect...) also, I would like to have a Totals footer row appear once the 1st row is added as well as it dissapear if all the rows are deleted. Is that possible?
    Also, how would you translate this using addnode: oCell.innerHTML = "<input name='' type='text' size='10' class='normal' onFocus=\"this.style.background='#F3F6F9'\" onblur=\"this.style.background='#FFF'\">";
    Last edited by bigalo; 05-02-2008 at 03:27 PM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •