在td裏追加div並設置值？

我有多個表，我需要填充。我使用jQuery來循環表格單元格。如果表格單元格具有data-text屬性，則需要附加div元素。 Div元素將允許單元格具有垂直滾動條。如果文本太長，這種方式表不會花費。在td裏追加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元素並設置值，但問題是，如果我移動到不同的表，再來一個多格將追加。這會造成重複。我不確定什麼是防止這種情況的最佳方法？或者如果有更好的方法來解決這個問題。如果有人有任何建議，請讓我知道。

在此先感謝。

來源

2017-09-06 espresso_coffee

在這裏，你去了一個解決方案

$('#' + 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爲附加的div容器。

希望這會幫助你。

來源

2017-09-06 17:05:11 Shiladitya

此解決方案將無法阻止多個追加。每次我運行這個循環時，新的div元素都會被添加到td單元格中。 –

@espresso_coffee。我已經更新了答案，看一看。示例解決方案https://jsfiddle.net/zb8ntoL9/1/ – Shiladitya

如果我理解正確，那麼您將不得不另外檢查<td>中是否已存在<div class="hm_textScroll"></div>。

一個可能的解決方案使用JavaScript的香草將是這樣的：

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>' 
    } 
    } 
});

來源

2017-09-06 17:08:32

在td裏追加div並設置值？

回答

相關問題