Adding and Deleting table row style

**bigalo** · 05-01-2008, 07:20 PM

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>

**jscheuer1** · 05-02-2008, 12:24 AM

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

**rangana** · 05-02-2008, 01:36 AM

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

**jscheuer1** · 05-02-2008, 06:59 AM

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

**bigalo** · 05-02-2008, 01:22 PM

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!

**bigalo** · 05-02-2008, 02:42 PM

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>

**jscheuer1** · 05-02-2008, 02:46 PM

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

**bigalo** · 05-02-2008, 02:50 PM

Originally Posted by jscheuer1

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?

**jscheuer1** · 05-02-2008, 02:50 PM

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>

**bigalo** · 05-02-2008, 02:59 PM

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'\">";

Thread: Adding and Deleting table row style

Thread Tools

Search Thread

Adding and Deleting table row style

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

Bookmarks

Bookmarks

Posting Permissions