473,221 Members | 1,759 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,221 software developers and data experts.

Script for adding and deleting rows to a table

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
2 3074
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

10
by: AdamG | last post by:
I am trying hard for days now to add and delete rows to a table. I could really use some help... Each row contains two buttons (images) - 'add row' and 'delete row'. When the user clicks add...
3
by: Jim Heavey | last post by:
Trying to figure out the technique which should be used to add rows to a datagrid. I am thinking that I would want an "Add" button on the footer, but I am not quite sure how to do that. Is that...
4
by: Geoff | last post by:
Hi I'm hoping somebody can help me with the following. I'm trying to delete all the rows in a dataview. There are 200 rows. Everything works fine until I delete half way through and then I'm...
2
by: Zak McGregor | last post by:
Hi all I have a table, for simplicity's sake containing one field, called unid. for example, select unid, oid from table gives me something like this: unid | oid ---------+---------
12
by: bikkaran | last post by:
Hi , I have a table that contains 15lakh records..... I want delete that table....and insert fresh set of record. when I run the command ...db2 "delete from schema.tabname" it hangs...
9
by: Hamed | last post by:
Hello I have a DataGrid that a is bound to a DataTable. Some of the rows in the DataTable should not be deleted. How can I prohibit deleting of some identified rows? The problem could be...
1
by: samn | last post by:
I wrote the following script in order to traverse an HTML table and merge the cells that have the same value across multiple rows. For some reason, however, it works for the first, third, and...
7
by: Miro | last post by:
Im a VB Newbie so I hope I'm going about this in the right direction. I have a simple DB that has 1 Table called DBVersion and in that table the column is CurVersion ( String ) Im trying to...
4
by: MiziaQ | last post by:
Hey, I'm using the following code to write entries to a data file and then read them in an msflexgrid. I now would like to add code under a delete button to use the table(grid) to delete rows from...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.