Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Add/Remove Row buttons not working properly.

    I have 2 tables with Add/Remove Row buttons. The first table's Add Row button adds a row that belongs in the second table, and the Remove Row button gives me an Object Error. The second table works properly. The JavaScript for both tables is identical except for the ID's. When the tables are put into seperate html files both of the Add buttons work properly, but the remove row button from table one is still giving me the Object Error. Can someone point out what i'm doing wrong? Thanks.

    Code for the first table
    Code:
    <SCRIPT language="javascript">
    function addRow(kodaktable) {               
    var table = document.getElementById(kodaktable);               
    var rowCount = table.rows.length;             
    var row = table.insertRow(rowCount);               
    var cell1 = row.insertCell(0);             
    var element1 = document.createElement("input");             
    element1.type = "checkbox";             
    cell1.appendChild(element1);               
    var cell2 = row.insertCell(1); 
    var element2 = document.createElement("input");             
    element2.type = "text";             
    cell2.appendChild(element2);                            
    var cell3 = row.insertCell(2);             
    var element2 = document.createElement("input");             
    element2.type = "text";             
    cell3.appendChild(element2); 
    var cell4 = row.insertCell(2);             
    var element2 = document.createElement("input");             
    element2.type = "text";             
    cell4.appendChild(element2);            
    var cell5 = row.insertCell(2);             
    var element2 = document.createElement("input");             
    element2.type = "text";             
    cell5.appendChild(element2); 
    var cell6 = row.insertCell(2);             
    var element2 = document.createElement("input");             
    element2.type = "text";             
    cell6.appendChild(element2); 
    }
    </script>
    <script>                                        
    function deleteRow(kodaktable) {             
    try {             
    var table = document.getElementById(kodaktable);             
    var rowCount = table.rows.length;               
    for(var i=0; i<rowCount; i++) {                 
    var row = table.rows[i];                 
    var chkbox = row.cells[0].childNodes[0];                 
    if(null != chkbox && true == chkbox.checked) {                     
    table.deleteRow(i);                     
    rowCount--;                     
    i--;                 
    }               
    }             
    }catch(e) {                 
    alert(e);             
    }         
    }       
    </SCRIPT> 
    
    <INPUT type="button" value="Add Row" onClick="addRow('kodaktable')" />
    <INPUT type="button" value="Delete Row" onClick="deleteRow('kodaktable')" />
    <TABLE id="kodaktable" width="350px" border="1">         
    <TR>             
                 
    <tr>
    	<th></th>
        <th>Job Name</th>
        <th>Job Number</th>
        <th>Start Doc</th>
        <th>End Doc</th>
        <th>Total</th>
      </tr>             
    <tr>
    	<td><INPUT type="checkbox" name="chk"/></td>
        <td><input type="text" name="name" /></td>
        <td><input type="text" name="name" /></td>
        <td><input type="text" name="name" /></td>
        <td><input type="text" name="name" /></td>
        <td><input type="text" name="name" /></td>
      </tr>
    </TR>     
    </TABLE>
    code for the second table.
    Code:
    <SCRIPT language="javascript">
    function addRow(incidenttable) {               
    var table = document.getElementById(incidenttable);               
    var rowCount = table.rows.length;             
    var row = table.insertRow(rowCount);               
    var cell1 = row.insertCell(0);             
    var element1 = document.createElement("input");             
    element1.type = "checkbox";             
    cell1.appendChild(element1);               
    
    var cell2 = row.insertCell(1); 
    var element2 = document.createElement("input");             
    element2.type = "text"; 
    element2.size = "70";             
    cell2.appendChild(element2);                            
    
    var cell3 = row.insertCell(2);             
    var element2 = document.createElement("input");             
    element2.type = "text";
    element2.size = "20";             
    cell3.appendChild(element2); 
    
    var cell4 = row.insertCell(2);             
    var element2 = document.createElement("input");             
    element2.type = "text";
    element2.size = "20";             
    cell4.appendChild(element2);
    }                                        
    function deleteRow(incidenttable) {             
    try {             
    var table = document.getElementById(incidenttable);             
    var rowCount = table.rows.length;               
    for(var i=0; i<rowCount; i++) {                 
    var row = table.rows[i];                 
    var chkbox = row.cells[0].childNodes[0];                 
    if(null != chkbox && true == chkbox.checked) {                     
    table.deleteRow(i);                     
    rowCount--;                     
    i--;                 
    }               
    }             
    }catch(e) {                 
    alert(e);             
    }         
    }       
    </SCRIPT> 
    <INPUT type="button" value="Add Row" onClick="addRow('incidenttable')" />
    <INPUT type="button" value="Delete Row" onClick="deleteRow('incidenttable')" />
    <table id="incidenttable" width="790px" border="1">
    <tr>
         <th></th>
         <th>Incident</th>
         <th>Kodak Downtime</th>
         <th>System Downtime</th>
    </tr>
    <tr>
         <td><INPUT type="checkbox" name="chk"/></td>
         <td><input type="text" name="name" size="70" /></td>
         <td><input type="text" name="name" size="20"></td>
         <td><input type="text" name="name" size="20"></td>
    </tr>
    </table>

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    So you have two global functions called addRow and two global functions called deleteRow. I wonder how that could cause a problem?

  • Users who have thanked Logic Ali for this post:

    Boskie (12-15-2011)

  • #3
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok, matching global functions changed from {addRow} and {deleteRow} Thank you for pointing that out.
    I now have {addRow},{addRow1},{deleteRow}, and {deleteRow1}.
    This has fixed all of the addRow issues, but i'm still getting the object error with the {deleteRow}.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •