By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,516 Members | 1,153 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,516 IT Pros & Developers. It's quick & easy.

Script for adding and deleting rows to a table

P: n/a
Hi,
I've used information on these newsgroups to build many pages. So I thought that now that I have my script working (something that I've been working on for about a week), I should post it so that it may help others.

If posting this script is against the rules in this group then please accept my appologies.

I developped this script so that I can add and remove rows in a table in which I have various input fields and I would use the input fields to pass data to a second page that would then process the data for database entry (hence the naming done for generating arrays to be processed by PHP on the second page).

The script is written so that I can use it in a page that has more than 1 table.

I have to say that I am very new to Javascript and that some of its logic is lost on me. To add to that the fact that different browsers handle the scripts differently is very annoying. I have tested this script with FireFox 1.5 and IE 6

Since I am just starting on Javascript, I am sure that the coding is not perfect and that there are better ways of doing what I have done. I've tried to include comments to explain (to myself) the logic behind the steps in the script.

Anyway here is the script, comments and suggestions are always appreciated.

Regards

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Generating Dynamic Table</title>
</head>

<body>
<script language="javascript" type="text/javascript">

function addSwatchInfo(tableName){
//Get the number of rows in the selected table
var numRows = document.getElementById(tableName).rows.length;

//Determines the row just above the last row
var adjNumRows = numRows - 1;

//Get Reference to table
var Table = document.getElementById(tableName);

//Get reference to the tbody in the table (seems to be required for IE to work)
var tbody =document.getElementById(tableName).getElementsByT agName("tbody")[0];
//Create new elements
//Element for row numbering

//create element (DIV used for text input)
var inCellrowNumber = document.createElement('div');

//set element attributes (name)
inCellrowNumber.setAttribute('name','rowNum[]');

//set element attributes (id)
inCellrowNumber.setAttribute('id','rowNum[]');

//set text that goes into the element
var rowNumText = document.createTextNode(adjNumRows);

//Put the text into the element
inCellrowNumber.appendChild(rowNumText);

//This section is basically a repeat of the above in order to set a new element in the next
//column
var inCellInput1 = document.createElement('input');
inCellInput1.setAttribute('name','fileName[]');
inCellInput1.setAttribute('id','fileName[]');
inCellInput1.setAttribute('type','file');
//This section is basically a repeat of the above in order to set a new element in the next
//column var inCellInput2 = document.createElement('input');//create element (input)
inCellInput2.setAttribute('name','deleteThis');//set element attributes (name)
inCellInput2.setAttribute('id','deleteThis');//set element attributes (id)
inCellInput2.setAttribute('value','Cancel');//set element attributes (size)
inCellInput2.setAttribute('type','button');//set element attributes (type)

// Add a row to the table just above the bottom row
var newRow = tbody.insertRow(adjNumRows);

//Add Cells to the row
newRow.insertCell(0).appendChild(inCellrowNumber);
newRow.insertCell(1).appendChild(inCellInput1);
newRow.insertCell(2).appendChild(inCellInput2);

//This is my work around to the problem of IE and setAttribute
// for event handling
newRowInput = '<input name="deleteThis" id="deleteThis" type="button" value="Cancel" onClick="killRow(parentNode.parentNode,parentNode. parentNode.parentNode.parentNode.id)">'

//Get Reference to cell that needs to be changed
var tdRef = document.getElementById(tableName).getElementsByTa gName("tbody")[0].getElementsByTagName("tr")[adjNumRows].getElementsByTagName("td")[2];

//Set the new value in the cell
tdRef.innerHTML = newRowInput;
}

function killRow(tr,tableName){

//Remove the selected row
tr.parentNode.removeChild(tr);

//Determine the number of rows
var numRows = document.getElementById(tableName).rows.length;
var startDataRow = 2;
var endDataRow = numRows - 1;

//If there are only two rows in the table it means that the
//first data row
//has been deleted, in which case add a row right away
if (numRows == 2){
addSwatchInfo(tableName);
}

//Begin a loop to adjust the numbers in each row again
var processingRow = startDataRow;
var newRowNum = 1;
do
{
//Get Reference to cell that needs to be changed
var tdRef = document.getElementById(tableName).getElementsByTa gName("tbody")[0].getElementsByTagName("tr")[processingRow-1].getElementsByTagName("td")[0];

//Set the new value in the cell
tdRef.innerHTML = newRowNum;

//increment up
processingRow++;
newRowNum++;

} while (processingRow <= endDataRow);
}

</script>

<form name="swatchInfoForm" id="swatchInfoForm" action="tableTest2.php" method="post">
<table width="100%" border="2" cellspacing="0" cellpadding="0" id="swatchInfoTable">
<tbody>
<tr>
<td>&nbsp;</td>
<td>Image</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td><input name="fileName[]" id="fileName[]" type="file"></td>
<td><input name="deleteThis" id="deleteThis" type="button" value="Cancel" onClick='killRow(parentNode.parentNode,parentNode. parentNode.parentNode.parentNode.id)'></td>
</tr>
<tr>
<td colspan="3"><input name="Next" type="button" value="Add Row" onClick="addSwatchInfo(parentNode.parentNode.paren tNode.parentNode.id)"><input name="Submit" type="submit" value="Submit"></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

--
Muzzy
Jun 22 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Wow!, that is one long script.

I'm fairly new to html and java too but thought I'd have a go at writing
some "Add/Remove" code...

<html>
<head>
</head>
<body>
<p><a href="#" onclick="row2.style.display='inline'">DISPLAY ROW 2</a>
<p><a href="#" onclick="row2.style.display='none'">HIDE ROW 2</a>
<table border="1">
<td>ROW 1 ITEM 1</td>
<td>ROW 1 ITEM 2</td>
<td>ROW 1 ITEM 3</td>
</table>

<span id="row2" style="display: none">
<table border="1">
<td>ROW 2 ITEM 1</td>
<td>ROW 2 ITEM 2</td>
<td>ROW 2 ITEM 3</td>
</table>
</span>

<table border="1">
<td>ROW 3 ITEM 1</td>
<td>ROW 3 ITEM 2</td>
<td>ROW 3 ITEM 3</td>
</table>
</body>
</html>

hehe... simple eh?

Andy
"Muzzy" <as*******@gmail.com.r.e.m.o.v.e> wrote in message
news:c3**************************@TEKSAVVY.COM...
Hi,
I've used information on these newsgroups to build many pages. So I
thought that now that I have my script working (something that I've been
working on for about a week), I should post it so that it may help others.

If posting this script is against the rules in this group then please
accept my appologies.

I developped this script so that I can add and remove rows in a table in
which I have various input fields and I would use the input fields to pass
data to a second page that would then process the data for database entry
(hence the naming done for generating arrays to be processed by PHP on the
second page).

The script is written so that I can use it in a page that has more than 1
table.

I have to say that I am very new to Javascript and that some of its logic
is lost on me. To add to that the fact that different browsers handle the
scripts differently is very annoying. I have tested this script with
FireFox 1.5 and IE 6

Since I am just starting on Javascript, I am sure that the coding is not
perfect and that there are better ways of doing what I have done. I've
tried to include comments to explain (to myself) the logic behind the
steps in the script.

Anyway here is the script, comments and suggestions are always
appreciated.

Regards

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Generating Dynamic Table</title>
</head>

<body>
<script language="javascript" type="text/javascript">

function addSwatchInfo(tableName){
//Get the number of rows in the selected table
var numRows = document.getElementById(tableName).rows.length;

//Determines the row just above the last row
var adjNumRows = numRows - 1;

//Get Reference to table
var Table = document.getElementById(tableName);

//Get reference to the tbody in the table (seems to be required for
IE to work)
var tbody
=document.getElementById(tableName).getElementsByT agName("tbody")[0];
//Create new elements
//Element for row numbering

//create element (DIV used for text input)
var inCellrowNumber = document.createElement('div');

//set element attributes (name)
inCellrowNumber.setAttribute('name','rowNum[]');

//set element attributes (id)
inCellrowNumber.setAttribute('id','rowNum[]');

//set text that goes into the element
var rowNumText = document.createTextNode(adjNumRows);

//Put the text into the element
inCellrowNumber.appendChild(rowNumText);

//This section is basically a repeat of the above in order to set a
new element in the next
//column
var inCellInput1 = document.createElement('input');
inCellInput1.setAttribute('name','fileName[]');
inCellInput1.setAttribute('id','fileName[]');
inCellInput1.setAttribute('type','file');
//This section is basically a repeat of the above in order to set a
new element in the next
//column var inCellInput2 = document.createElement('input');//create
element (input)
inCellInput2.setAttribute('name','deleteThis');//set element attributes
(name)
inCellInput2.setAttribute('id','deleteThis');//set element attributes (id)
inCellInput2.setAttribute('value','Cancel');//set element attributes
(size)
inCellInput2.setAttribute('type','button');//set element attributes (type)

// Add a row to the table just above the bottom row
var newRow = tbody.insertRow(adjNumRows);

//Add Cells to the row
newRow.insertCell(0).appendChild(inCellrowNumber);
newRow.insertCell(1).appendChild(inCellInput1);
newRow.insertCell(2).appendChild(inCellInput2);

//This is my work around to the problem of IE and setAttribute
// for event handling
newRowInput = '<input name="deleteThis" id="deleteThis"
type="button" value="Cancel"
onClick="killRow(parentNode.parentNode,parentNode. parentNode.parentNode.parentNode.id)">'

//Get Reference to cell that needs to be changed
var tdRef =
document.getElementById(tableName).getElementsByTa gName("tbody")[0].getElementsByTagName("tr")[adjNumRows].getElementsByTagName("td")[2];

//Set the new value in the cell
tdRef.innerHTML = newRowInput;
}

function killRow(tr,tableName){

//Remove the selected row
tr.parentNode.removeChild(tr);

//Determine the number of rows
var numRows = document.getElementById(tableName).rows.length;
var startDataRow = 2;
var endDataRow = numRows - 1;

//If there are only two rows in the table it means that the
//first data row
//has been deleted, in which case add a row right away
if (numRows == 2){
addSwatchInfo(tableName);
}

//Begin a loop to adjust the numbers in each row again
var processingRow = startDataRow;
var newRowNum = 1;
do
{
//Get Reference to cell that needs to be changed
var tdRef =
document.getElementById(tableName).getElementsByTa gName("tbody")[0].getElementsByTagName("tr")[processingRow-1].getElementsByTagName("td")[0];

//Set the new value in the cell
tdRef.innerHTML = newRowNum;

//increment up
processingRow++;
newRowNum++;

} while (processingRow <= endDataRow);
}

</script>

<form name="swatchInfoForm" id="swatchInfoForm" action="tableTest2.php"
method="post">
<table width="100%" border="2" cellspacing="0" cellpadding="0"
id="swatchInfoTable">
<tbody>
<tr>
<td>&nbsp;</td>
<td>Image</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td><input name="fileName[]" id="fileName[]" type="file"></td>
<td><input name="deleteThis" id="deleteThis" type="button"
value="Cancel"
onClick='killRow(parentNode.parentNode,parentNode. parentNode.parentNode.parentNode.id)'></td>
</tr>
<tr>
<td colspan="3"><input name="Next" type="button" value="Add Row"
onClick="addSwatchInfo(parentNode.parentNode.paren tNode.parentNode.id)"><input
name="Submit" type="submit" value="Submit"></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

--
Muzzy

Jun 23 '06 #2

P: n/a
Andrew Bailey wrote:
Wow!, that is one long script.
Please don't top post here.

I'm fairly new to html and java too but thought I'd have a go at writing
some "Add/Remove" code...

<html>
<head>
</head>
<body>
<p><a href="#" onclick="row2.style.display='inline'">DISPLAY ROW 2</a>


Which requires that 'row2' is a reference to something. For the above
to work, you are dependent on IE's habit of adding element names and IDs
as global variables. Some other browsers will tolerate it, but it's not
standard and not to be depended upon.

Also, the default value for the display attribute in CSS 2 is
'table-row', not 'inline'. IE (and some others) don't support CSS 2
very well and use 'inline' for table rows. To work around that, change
the display attribute from 'none' to '' (empty string) which will allow
the display attribute value to return to the default or whatever other
value it might have.

So what you get (for this simple demo) is:

<input type="button" value="DISPLAY ROW 2" onclick="
document.getElementById('row2').style.display = '';
">

<input type="button" value="HIDE ROW 2" onclick="
document.getElementById('row2').style.display = 'none';
">
[...]

--
Rob
Jun 23 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.