...

View Full Version : Adding and Deleting table row style



bigalo
05-01-2008, 08:47 PM
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?



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

tomws
05-01-2008, 11:49 PM
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.


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.


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



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

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.

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

rangana
05-02-2008, 04:18 AM
@tomws,
You missed to mention:


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:


<hr>


...and the deprecated width (http://www.codehelp.co.uk/html/deprecated.html) :)


<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 :)

tomws
05-02-2008, 04:30 AM
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.

Kor
05-02-2008, 09:24 AM
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.

bigalo
05-02-2008, 03:29 PM
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!!!

tomws
05-02-2008, 04:46 PM
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.

Kor
05-02-2008, 07:52 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum