Fix incorrect nesting

Question

function drawinventoryList() {
    inventoryArray.sort();
    var inventoryString = "";
    for (x in inventoryArray) {
        arrayValue = inventoryArray[x];
        var counter = parseInt(x) + 1;
        if (counter == 1) {
            inventoryString = "<table width='100%' celpadding='0' cellspacing='0' style='border:1px solid #d00;'>"
        }
        if (arrayValue.substring(0, arrayValue.indexOf("@")) != "XXXXXXXX") {
            inventoryString = inventoryString + "<tr><td>" + counter + ". " + arrayValue.substring(0, arrayValue.indexOf("@")) + ", " + arrayValue.substring(arrayValue.indexOf("@") + 1) + " (<a href=\"javascript:removeinventory('" + x + "')\">remove</a>)</td></tr>";
        }
    }
    if (inventoryString == "") inventoryString = "None."
    document.getElementById("selectedInventories").innerHTML = inventoryString;
}

... this function creates an invalid table. I need the 'counter' 'name' and 'remove link' in separate columns. How do I correctly create and close all tags?

Many thanks

Answer 1

It looks like you're just forgetting the closing tag for the table. Try this instead:

function drawinventoryList() {
    inventoryArray.sort();
    var inventoryString = "";
    for (x in inventoryArray) {
        arrayValue = inventoryArray[x];
        var counter = parseInt(x) + 1;
        if (counter == 1) {
            inventoryString = "<table width='100%' celpadding='0' cellspacing='0' style='border:1px solid #d00;'>"
        }
        if (arrayValue.substring(0, arrayValue.indexOf("@")) != "XXXXXXXX") {
            inventoryString = inventoryString + "<tr><td>" + counter + ". " + arrayValue.substring(0, arrayValue.indexOf("@")) + ", " + arrayValue.substring(arrayValue.indexOf("@") + 1) + " (<a href=\"javascript:removeinventory('" + x + "')\">remove</a>)</td></tr>";
        }
    }
    if (inventoryString == "") {
        inventoryString = "None.";
    } else {
        inventoryString = inventoryString + "</table>";
    }
    document.getElementById("selectedInventories").innerHTML = inventoryString;
}

The only change was from:

if (inventoryString == "") inventoryString = "None."

to:

    if (inventoryString == "") {
        inventoryString = "None.";
    } else {
        inventoryString = inventoryString + "</table>";
    }

Update: In your comment, you stated that

I still need to separate counter, name and link in separated [sic] TD

That's probably just a matter of inserting some </td><td> sections, something like:

inventoryString = inventoryString +
    "<tr>" +
        "<td>" + counter + ".</td>" + 
        "<td>" + arrayValue.substring(0, arrayValue.indexOf("@")) + ", " +
            arrayValue.substring(arrayValue.indexOf("@") + 1) + "</td>" +
        "<td>(<a href=\"javascript:removeinventory('" + x +
            "')\">remove</a>)</td>" +
    "</tr>";

Answer 2

I am not entirely sure what you are trying to do but maybe this might be what you are looking for.

function drawinventoryList() {
    inventoryArray.sort();
    var inventoryString = "<table width='100%' celpadding='0' cellspacing='0'   style='border:1px solid #d00;'>";
    var count = 0;
    for (x in inventoryArray) {
        arrayValue = inventoryArray[x];            
        count++;
        if (arrayValue.substring(0, arrayValue.indexOf("@")) != "XXXXXXXX") {
            inventoryString = inventoryString + "<tr><td>" + counter + ". " + arrayValue.substring(0, arrayValue.indexOf("@")) + ", " + arrayValue.substring(arrayValue.indexOf("@") + 1) + " (<a href=\"javascript:removeinventory('" + x + "')\">remove</a>)</td></tr>";
        }
    }

    if (count == 0) {
        inventoryString = "None.";
    } else {
        inventoryString = inventoryString + "</table>";
    }
    document.getElementById("selectedInventories").innerHTML = inventoryString;
}