javascript - 在 td 内追加 div 并设置值？

Question

我有多个表需要填充。我使用 jQuery 循环遍历表格单元格。如果表格单元格具有 data-text 属性，我需要 append div 元素。 Div 元素将允许单元格具有垂直滚动条。如果文本太长，这种方式表不会扩展。

这是我的代码示例:

$('#'+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'});
  }
});

上面的代码将追加 div 元素并设置值，但问题是如果我移动到另一个表并再次返回，将追加一个 div。这会产生重复。我不确定防止这种情况的最佳方法是什么？或者是否有更好的方法来解决此问题。如果有人有任何建议，请告诉我。

提前致谢。

Answer 1

给你一个解决方案

$('#' + 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'});
    }
  });
});

首先循环遍历每个 tr 然后循环遍历每个 td。

要检查 data-attribute，请使用 typeof $(this).attr('data-text') != 'undefined

在 if 语句(真条件)中，我使用了反引号 ES6 来 append div 容器。

希望对您有所帮助。