Question

I’m using this JS function to dynamically add labels to a table, this function is called from a combo box selection index change, when user selects a new item, it should be added to label, I’m going to check current values of table (i.e. rows of table) and only add the new item if it is new, what should I do? how can I check existing items (labels) of table?

var spanTag = document.createElement("span");
        spanTag.id = document.getElementById('cmbDestinationUser').selectedIndex.toString();

        var e = document.getElementById("cmbDestinationUser");
        var strUser = e.options[e.selectedIndex].text;
        spanTag.innerHTML = strUser;
        var TR = document.createElement('tr');
        var TD = document.createElement('td');
        TD.appendChild(spanTag);
        TR.appendChild(TD);

        document.getElementById('tblReceivers').appendChild(TR);

thanks

Answer 1

You’re adding a span with a fixed id – you can just find if it already exists:

if( document.getElementById( spanTag.id ) == null )
{
   // add it
}

Also, you could simplify your life amazingly with a bit of jQuery. I think this is equivalent to what you’re trying to do :

id = $('#cmdDestinationUser').val();
if( $("#"+id).length == 0 )
{
  selText = $('#cmdDestinationUser option:selected').val();
  $("#tblReceivers").append("<tr><td><span id='" + id + "'>" + selText + "</span></td></tr>");
}