CODEWITHSUNDEEP
javascriptjqueryhtmlappend
espresso_coffee
espresso_coffee

Reputation: 6110

Append div inside of td and set the value?

I have multiple tables that I need to populate. I use jQuery to loop through table cells. If table cell has data-text attribute I need to append div element. Div element will allow cell to have scroll bar vertical. This way table won't expend if text is too long.

Here is example of my code:

$('#'+tabID+' table tr td').each(function(){
  elementID = $(this).prop('id').toUpperCase();
  value = $.trim(decodeURIComponent(obj.DATA[elementID]['value']));

  if($(this).attr('data-text')) {
    $(this).append('<div class="hm_textScroll">'+value+'</div>');
  } else {
    $(this).text(value).css({'color':'blue','font-weight':'bold'});
  }
});

Code above will append div element and set the value but the problem is that if I move to a different table and come back again one more div will append. That creates duplicate. I'm not sure what is the best way to prevent that? Or if there is a better way to work around this. If anyone have suggestions please let me know.

Thanks in advance.

Upvotes: 1

Views: 1349

Answers (2)

Shiladitya
Shiladitya

Reputation: 12181

Here you go with a solution

$('#' + tabID + ' table tr').each(function(){
  $(this).find('td').each(function(){
    elementID = $(this).prop('id').toUpperCase();
    value = $.trim(decodeURIComponent(obj.DATA[elementID]['value']));

    if(typeof $(this).attr('data-text') != 'undefined') {
      if($(this).find('div.hm_textScroll').length > 0){
        $(this).find('div.hm_textScroll').text(value);
       } else {
        $(this).append(`<div class="hm_textScroll">${value}</div>`);
       }       
    } else {
      $(this).text(value).css({'color':'blue','font-weight':'bold'});
    }
  });
});

First loop through each tr then loop through each td.

For check the data-attribute, use typeof $(this).attr('data-text') != 'undefined

In the if statement (true condition) I've used backtick ES6 for appending div container.

Hope this will help you.

Upvotes: 1

Martin Reiche
Martin Reiche

Reputation: 1672

If I understand you correctly, you would have to additionally check whether a <div class="hm_textScroll"></div> already exists in the <td>.

One possible solution using vanilla javascript would be this:

const tableElement = document.querySelectorAll('#'+tabID+'table tr td');
tableElement.forEach(td => {
  if (td.hasAttribute("data-text")) {
    if (!td.querySelector(".hm_textScroll")) {
      td.innerHTML='<divclass="hm_textScroll">'+value+'</div>'
    }
  }
});

Upvotes: 0

Related Questions