Ad

Javascript Dyanmic Table Add / Delete Row

- 1 answer

I am trying to build a form for creating a list for image deployment.

Image example of my table

I am able to create a dynamic table on form load and also collect the data for each value, but can seem to get the Add and Delete working. My Question:

What must I do(or change) in my code to get the ADD and Delete options working and to export the table data in CSV format.

Please could someone help and/or guide me as I am getting so lost and really would like a working example .. there is so much on the net it's over-whelming Newest place I visited is Mozilla DOM help pages what's confusing is how to load your own variables into the table

For reference I used stackoverflow and plenty google and finally this site

Here is my code:

<div id="metric_results">
Enter Target Name:
<input type="text" name="textbox1" id="textbox1" VALUE="win2k8"/> 
<br>
<input type="button" id="create" value="Click here" onclick="Javascript:addTable()">
<input type="button" id="create" value="Add Row" onclick="Javascript:addRow()">
<input type="button" id="create" value="Delete Row" onclick="Javascript:deleteRow()">

</div>

<SCRIPT LANGUAGE="JavaScript">
window.onload =addTable;//loads table on window loading
function addTable() {
var myTableDiv = document.getElementById("metric_results")
var table = document.createElement('TABLE')
var tableBody = document.createElement('TBODY')
var imageName = textbox1.value
table.border = '1'
table.appendChild(tableBody);

var heading = new Array();
heading[0] = "imageName"
heading[1] = "acceptAllEula"
heading[2] = "noSSLverify"
heading[3] = "noVerification"
heading[4] = "TargetImagelocation"
heading[5] = "Username"
heading[6] = "Password"
heading[7] = "Target IP"

var imageInfo = new Array()
imageInfo[0] = new Array(imageName, "acceptAllEula", "noSSLverify", "noVerification", "testLocation", "user", "pass", "192.168.1.151")
imageInfo[1] = new Array("win2008", "acceptAllEula", "noSSLverify", "noVerification", "testLocation", "user", "pass", "192.168.1.151")



//TABLE COLUMNS
var tr = document.createElement('TR');
tableBody.appendChild(tr);
for (i = 0; i < heading.length; i++) {
    var th = document.createElement('TH')
    th.width = '75';
    th.appendChild(document.createTextNode(heading[i]));
    tr.appendChild(th);
}

//TABLE ROWS
for (i = 0; i < imageInfo.length; i++) {
    var tr = document.createElement('TR');
    for (j = 0; j < imageInfo[i].length; j++) {
        var td = document.createElement('TD')
        td.appendChild(document.createTextNode(imageInfo[i][j]));
        tr.appendChild(td)
    }
    tableBody.appendChild(tr);
}  
myTableDiv.appendChild(table)
}

function addRow() {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var colCount = table.rows[0].cells.length;



        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "checkbox";
        element1.name="chkbox[]";
        cell1.appendChild(element1);

        var cell2 = row.insertCell(1);
        cell2.innerHTML = rowCount + 1;

        var cell3 = row.insertCell(2);
        var element2 = document.createElement("input");
        element2.type = "text";
        element2.name = "txtbox[]";
        cell3.appendChild(element2);

    }

function deleteRow(tableID) {
        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--;
            }


        }
        function deleteRow(tableID) {
        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>   
Ad

Answer

You're not setting any id to the table you're creating onload - so when you later come to call getElementById() inside addRow it cannot be found (and you're using a variable which does not exist - tableID!)

My suggestion is to take an id as a parameter to addTable, and set that as the id of the dynamically generated table:

function addTable(id) {
  var myTableDiv = document.getElementById("metric_results")
  var table = document.createElement('TABLE')
  table.id = id;
  ....

onload, pass somethig sensible - default perhaps:

window.onload = function(){
    addTable("default");
}

And either pass this in when adding a row, or use the default provided above:

function addRow() {
  var table = document.getElementById("default");
  ....

or

function addRow(id) {
  var table = document.getElementById(id);

Updated fiddle: https://jsfiddle.net/egtu5kay/5/

Left as an exercise for you: Correctly formatting the new row as you wish.

Ad
source: stackoverflow.com
Ad