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 4 of 4
  1. #1
    Regular Coder MaDmiX's Avatar
    Join Date
    Feb 2012
    Location
    Charlotte, NC
    Posts
    199
    Thanks
    51
    Thanked 0 Times in 0 Posts

    Dynamic table broken delete row function

    Hi All,

    I am working on a script that creates a table, taking the data from a number of text fields and populating the table cells with it. Originally I had to start with an existing table containing one blank row but I was able to get the script to create the table dynamically.

    Unfortunately I seem to have broken my delete row function (this was working fine when the script started with an existing table). The error I am getting is:

    TypeError: 'cells.0.childNodes' is null or not an object

    I googled this but could not find anything to help. I don't have alot of javascript experience and need help from the experts.

    Thanks in advance for all your help guys!

    Kind regards,

    Ken

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
    
    </style>
    <link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
    
    </head>
    <SCRIPT language="javascript">         
    function addRow(tableID) {
        if (!document.getElementById(tableID)) {
            //alert("the table does not exist");
            var body = document.getElementsByTagName("body")[0];
    
            // creates a <table> element and a <tbody> element
            var tbl = document.createElement("table");
            var tblBody = document.createElement("tbody");
            var newRow = document.createElement("tr");
            
            // add the row to the end of the table body
            tblBody.appendChild(newRow);
            
            // put the <tbody> in the <table>
            tbl.appendChild(tblBody);
            
            // appends <table> into <body>
            body.appendChild(tbl);
    
            // sets the id of "dataTable" and border attribute of tbl to 0;
            tbl.setAttribute("id", "dataTable");
            tbl.setAttribute("border", "0");
            }
    
        var StartTime = document.getElementById('StartTime');
        var EndTime = document.getElementById('EndTime');
        var MaterialID = document.getElementById('MaterialID');
        var Title = document.getElementById('Title');               
        
        var table = document.getElementById(tableID);               
        
        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.setAttribute("name","StartTime[]");
        element2.value = StartTime.value;             
        cell2.appendChild(element2);
        StartTime.value="";              
        
        var cell3 = row.insertCell(2);
        var element3 = document.createElement("input");             
        element3.type = "text";
        element3.setAttribute("name","EndTime[]");
        element3.value = EndTime.value;             
        cell3.appendChild(element3);
        EndTime.value=""; 
    
        var cell4 = row.insertCell(3); 
        var element4 = document.createElement("input");             
        element4.type = "text";
        element4.setAttribute("name","MaterialID[]");
        element4.value = MaterialID.value;            
        cell4.appendChild(element4);
        MaterialID.value="";               
        
        var cell5 = row.insertCell(4);
        var element5 = document.createElement("input");             
        element5.type = "text";
        element5.setAttribute("name","Title[]");
        element5.value = Title.value; 
        cell5.appendChild(element5);
        Title.value="";              
    }           
    function deleteRow(tableID) {
    	if (document.getElementById(tableID)) {
        //alert("the table exists");
        try {             
            var table = document.getElementById(tableID);             
            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> 
    <body>
    <span id="spryStartTime">
    <label for="StartTime">Start Time:</label><br />
    <input name="StartTime" type="text" id="StartTime" tabindex="1" size="10" maxlength="8" />
    <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span><br />
    <label for="EndTime">End Time:</label><br />
    <span id="spryEndTime">
    <input name="EndTime" type="text" id="EndTime" tabindex="2" size="10" maxlength="8" />
    <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span><br />
    <label for="MaterialID">Material ID:</label><br />
    <span id="spryMaterialID">
    <input name="MaterialID" type="text" id="MaterialID" tabindex="3" size="10" maxlength="10" />
    <span class="textfieldRequiredMsg">A value is required.</span></span><br />
    <label for="Title">Title:</label><br />
    <span id="spryTitle">
    <input name="Title" type="text" id="Title" tabindex="4" size="50" maxlength="50" />
    <span class="textfieldRequiredMsg">A value is required.</span></span><br />
        <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />       
        <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />       
    
    <script type="text/javascript" />
    var sprytextfield3 = new Spry.Widget.ValidationTextField("spryStartTime", "time", {validateOn:["blur"], format:"HH:mm:ss", useCharacterMasking:true});
    var sprytextfield4 = new Spry.Widget.ValidationTextField("spryEndTime", "time", {format:"HH:mm:ss", useCharacterMasking:true, validateOn:["blur"]});
    var sprytextfield5 = new Spry.Widget.ValidationTextField("spryMaterialID", "none", {validateOn:["blur"]});
    var sprytextfield6 = new Spry.Widget.ValidationTextField("spryTitle", "none", {validateOn:["blur"]});
    </script>
    
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Apr 2011
    Posts
    49
    Thanks
    0
    Thanked 13 Times in 12 Posts
    You're adding an empty row to your initial table.
    Code:
    if (!document.getElementById(tableID)) {
      var body = document.getElementsByTagName("body")[0];
      var tbl = document.createElement("table");
      var tblBody = document.createElement("tbody");
      var newRow = document.createElement("tr");
      tblBody.appendChild(newRow);
      tbl.appendChild(tblBody);
      body.appendChild(tbl);
      tbl.setAttribute("id", "dataTable");
      tbl.setAttribute("border", "0");
    };
    When the line:
    var chkbox = row.cells[0].childNodes[0];
    is executed for row[0], there is no rows[0].cells[0], which results in an error.

  • Users who have thanked Goos for this post:

    MaDmiX (03-10-2012)

  • #3
    Regular Coder MaDmiX's Avatar
    Join Date
    Feb 2012
    Location
    Charlotte, NC
    Posts
    199
    Thanks
    51
    Thanked 0 Times in 0 Posts
    Goos,

    Thanks for catching that. I removed the lines that handle the var newRow and the script works perfectly now. If I may indulge you a bit more, I need to add a function to essentially do the reverse. That is take the cell data from a row and place it in the text fields (deleting the row) so the user can make changes and then click a button that would replace this data in the same row index (I think that is the correct term). I have a basic idea of how to accomplish this:

    1. I can call my deleteRow function and wrap it in an if statement to make sure that the user can only update one row at a time.
    2. I know how to copy the text field contents to my cells using the .value property. I can do the reverse to get the cell contents to the text fields.

    The only place I am stuck is how to get the updated data back in the same place in the table as before. Can you offer some sugestions or maybe point me to some resources that would help with this?

    Thanks again,

    Ken
    Last edited by MaDmiX; 03-10-2012 at 07:01 PM.

  • #4
    Regular Coder MaDmiX's Avatar
    Join Date
    Feb 2012
    Location
    Charlotte, NC
    Posts
    199
    Thanks
    51
    Thanked 0 Times in 0 Posts
    I worked out this function but the only thing that seems to not be working is the line:
    Code:
    chkbox=false;
    Can someone help me with the proper syntax to make the checkbox become unchecked after the row is updated?

    Thanks in advance.

    Ken

    Code:
    function updateRow(tableID) {
        if (document.getElementById(tableID)) {
        //alert("the table exists");
        var StartTime = document.getElementById('StartTime');
        var EndTime = document.getElementById('EndTime');
        var MaterialID = document.getElementById('MaterialID');
        var Title = document.getElementById('Title');
        try {             
            var table = document.getElementById(tableID);             
            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);
                    chkbox=false;
                    row.cells[1].childNodes[0].value=StartTime.value;
                    StartTime.value="";
                    row.cells[2].childNodes[0].value=EndTime.value;
                    EndTime.value="";
                    row.cells[3].childNodes[0].value=MaterialID.value;
                    MaterialID.value="";
                    row.cells[4].childNodes[0].value=Title.value;
                    Title.value="";                     
                    rowCount--;                     
                    i--;                 
                }               
            }             
        }catch(e) {                 
            alert(e);             
        }         
    }
    }


  •  

    Posting Permissions

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