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" <asavarani@gmail.com.r.e.m.o.v.e> wrote in message
news:c3e0d$449ac6ff$cef88851$9817@TEKSAVVY.COM...[color=blue]
> 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> </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
>
>[/color]
