Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 250
  • Last Modified:

How do I remove data from a dynamically created table

I am creating a table to display data from an XML file with the code attached.  This created table is within a div with the id =xmldata. This div is within the 1st row of an HTML table on the page.

It is used on a page that retrieves client records.  

I can't figure out how to remove the data.  When I move to a new client the new client data is appended to the existing table so I guess I have to destroy it before  my next data set is returned.  

I have tried and failed to figure out how to do this

Thanks
code

function displayData(response)  
    {  
    var xmlEl = response.getElementsByTagName("DISP");
    var table = document.createElement("table");
    table.border = "0";
	table.width="100%";
	table.align="CENTER";
    var tbody = document.createElement("tbody");
    // Append the body to the table
    table.appendChild(tbody);
    var row = document.createElement("tr");
    // Append the row to the body
    tbody.appendChild(row);
    for (colHead = 0; colHead < xmlEl[0].childNodes.length; colHead++) {
        if (xmlEl[0].childNodes[colHead].nodeType != 1) {
            continue;
        }
        var tableHead = document.createElement("th");
        var colName = document.createTextNode(xmlEl[0].childNodes[colHead].nodeName);
        tableHead.align="left"
		tableHead.style.fontFamily = "Geneva, Arial, Helvetica, sans-serif";
		tableHead.style.fontSize = "12px";
		tableHead.style.backgroundColor = "#E0F2F5";
		tableHead.appendChild(colName);
        row.appendChild(tableHead);
    }
    tbody.appendChild(row);
    // Create table row
    for (i = 0; i < xmlEl.length; i++) {
        var row = document.createElement("tr");
        // Create the row/td elements
        for (j = 0; j < xmlEl[i].childNodes.length; j++) {
            // Skip it if the type is not 1
            if (xmlEl[i].childNodes[j].nodeType != 1) {
                continue;
            }

            // Insert the actual text/data from the XML document.
            var td = document.createElement("td");
            var xmlData = document.createTextNode(xmlEl[i].childNodes[j].firstChild.nodeValue);
            if (i % 2) {
                td.style.backgroundColor = "#E0F2F5";
            }
            td.style.fontFamily = "Geneva, Arial, Helvetica, sans-serif";    
            td.style.fontSize = "12px";
			td.style.fontstyle = "normal";
			td.appendChild(xmlData);
            row.appendChild(td);
        }
        tbody.appendChild(row);
    }
    document.getElementById("xmldata").appendChild(table);
	}


Thank you

Open in new window

0
Charlietn
Asked:
Charlietn
  • 3
1 Solution
 
ZvonkoSystems architectCommented:
Before appending new data clear old content like this:
document.getElementById("xmldata").innerHTML="";
    document.getElementById("xmldata").appendChild(table);
}

Open in new window

0
 
pepdCommented:
use jQuery for your own good also after that you can use datatables plugin which will siginificantly reduce the time you need for code

0
 
ZvonkoSystems architectCommented:
Hello pepd, Welcome to EE!
0
 
CharlietnAuthor Commented:
Thanks.  Guess I could not see the forest from the trees!
0
 
ZvonkoSystems architectCommented:
<|:-)
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now