动态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元素创建

回答

相关问题