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>
