M
Muzzy
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).getElementsByTagName("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).getElementsByTagName("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).getElementsByTagName("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.parentNode.parentNode.id)"><input name="Submit" type="submit" value="Submit"></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
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).getElementsByTagName("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).getElementsByTagName("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).getElementsByTagName("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.parentNode.parentNode.id)"><input name="Submit" type="submit" value="Submit"></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>