動態DOM元素創建

我應該用jQuery行添加到表：動態DOM元素創建

<table class="table"> 
     <tbody id="dh-values"> 
     </tbody> 
    </table>

我已經寫了下面的代碼：

function displayHash(fieldName) { 
    $('#dh-values').append('<tr></tr>').append('<td id="dh-'+fieldName+'">'+$('#'+fieldName).val()+'</td>').append('<td id="dh-'+fieldName+'-h">'+hex_sha1($('#'+fieldName).val())+'</td>'); 
    };

但它看起來很可怕。有什麼辦法可以簡化嗎？ Esalija的

來源

2012-06-17 LA_

您實際上將'td'附加到'tbody' – Esailija

您只需要一個'.append（）'調用。你可以建立整個字符串''並追加一次。但它並不一定更漂亮。 –

它看起來很糟糕，因爲你是「鏈接」。將每個方法調用分隔到一個新行。片段也可以使用一些變量。 – 2012-06-17 16:17:11

聯合答案，amnotiam等

DEMO

function displayHash(fieldID) { 
    var val = $('#'+fieldID).val(); 
    var valSha = hex_sha1(val); 
    $("<tr>").appendTo("#dh-values") 
     .append('<td id="dh-'+fieldID+'">'+val+'</td>') 
     .append('<td id="dh-'+fieldID+'-h">'+valSha+'</td>'); 
};

來源

2012-06-17 16:23:03 mplungjan

雖然 – Esailija

仍附加到'tbody'.append'返回它運行的jQuery對象 – Esailija

是的，仍然這樣做。 – 2012-06-17 16:25:16

http://jsbin.com/exopoc/edit#javascript,html,live

function displayHash(fieldName) { 

    var cont = '<tr><td id="dh-'+ fieldName +'">'+ fieldName +'</td> <td id="dh-'+ fieldName +'-h">'+ fieldName +'</td></tr>'; 
    $(cont).appendTo('#dh-values'); 

} 



displayHash('12345678');

來源

2012-06-17 16:29:30

您應該使用client side templating engine分離HTML結構和業務邏輯操縱的數據進行綁定與在javascript中的模板。

來源

2012-06-17 17:31:32

動態DOM元素創建

回答

相關問題