Script for adding and deleting rows to a table

Discussion in 'Javascript' started by Muzzy, Jun 22, 2006.

  1. Muzzy

    Muzzy Guest

    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>&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.parentNode.parentNode.id)"><input name="Submit" type="submit" value="Submit"></td>
    </tr>
    </tbody>
    </table>
    </form>
    </body>
    </html>
     
    Muzzy, Jun 22, 2006
    #1
    1. Advertisements

  2. Muzzy

    RobG Guest

    Please don't top post here.
    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';
    ">


    [...]
     
    RobG, Jun 23, 2006
    #2
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.