Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Apr 2008
    Location
    North Carolina
    Posts
    58
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Question Adding and Deleting table row style

    Hello,

    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>

  • #2
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    This was fun. I didn't know those functions existed. I made these change to get it to work.

    First, you want to set the class name rather than the ID. CSS IDs must be unique for the page. With that in mind, these were the first changes.
    Code:
    tr#even {
    // changes to
    tr.even {
    // change them all
    
    
    <tr id="even">
    // changes to 
    <tr class="even">
    Next, your example code doesn't work cross-browser (with a strict doctype, at least), so I made these changes. Someone else with more experience might do it differently.
    Code:
    var newRow = document.all("tblGrid").insertRow();
    // changes to
    var newRow = document.getElementById("tblGrid").insertRow(-1);
    // notice the -1 is also new 
    // - research the function to figure out how to use this index code
    
    var oCell = newRow.insertCell(-1); // another -1
    // ...
    oCell = newRow.insertCell(-1); // another -1
    // ...
    oCell = newRow.insertCell(-1); // another -1
    // ...
    oCell = newRow.insertCell(-1); // another -1
    
    
    // ...
    var oRow = src.parentNode.parentNode;

    Now, add the class - not id (as mentioned above).

    Code:
    // right about here
    var newRow = document.all("tblGrid").insertRow();
    newRow.className = "even";

    Thing is, there's no styling for the cells in the row - only the row itself. So, to check that it actually works, I added this to the css section just under the new tr.even block.
    Code:
    tr.even td { border: thin red solid; }
    At this point, if I actually included all of the changes above, you should be able to see styling applied to the cells in the new rows. Obviously, the styling is not what you want, but that's easy enough to fix in the css. And since it looks like you may want to alternate styling for even/odd rows, you could probably use those index numbers passed to the insertRow function to decide which way to style it.

    I'll post the whole code below in case I missed something above. This is with a doctype. Use them. They're you're friends.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-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 ne
    wly 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 con
    tain 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 r
    owIndex
                    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 td{ border: thin red solid; }
    
    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 D
    HTML
            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 d
    efault -->
            <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 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>

  • Users who have thanked tomws for this post:

    bigalo (05-02-2008)

  • #3
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    @tomws,
    You missed to mention:
    Code:
    Demo of a simple table grid that allows adding and deleting rows using D
    HTML
            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/>
    ...Also:
    Code:
    <hr>
    ...and the deprecated width
    Code:
    <th width="150px">Field1</th>
    <th width="150px">Field2</th>
    <th width="250px">Field3</th>
    <th width="250px">Action</th>
    You can use style:width:Xpx
    Learn how to javascript at 02geek

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

  • Users who have thanked rangana for this post:

    tomws (05-02-2008)

  • #4
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Oh, yes, I should have stated that the code had other problems. I only made changes from the original to get the add/remove row functionality working. Thanks for pointing that out, though. Maybe someone else will see they need to fix the code before just using it.

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    You all miss a fundamental issue. That code is old and works for IE only (document.all instead of document.getElementById, parentElement instead of parentNode ... and so on...). Also, a script should bear a type=text/javascript, not a language=javascript

    Google for an up-to-dated add/delete rows in a table. That one is deprecated.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • Users who have thanked Kor for this post:

    bigalo (05-02-2008)

  • #6
    New Coder
    Join Date
    Apr 2008
    Location
    North Carolina
    Posts
    58
    Thanks
    17
    Thanked 0 Times in 0 Posts
    I would like to thank you all for your help and such great suggestion! I hope to be as good as you all some day!!!

  • #7
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Quote Originally Posted by Kor View Post
    You all miss a fundamental issue. That code is old and works for IE only
    <snip>
    With my changes, it works cross-browser (at least in IE6/7, FF2, and Safari3). That's not to say there aren't still problems in it, as pointed out by rangana, but with modification, it works fine.

  • #8
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by tomws View Post
    With my changes, it works cross-browser (at least in IE6/7, FF2, and Safari3). That's not to say there aren't still problems in it, as pointed out by rangana, but with modification, it works fine.
    Yes, you are right.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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