Question

我应该使用jQuery向表中添加行：

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

但它看起来很糟糕。有什么办法可以简化吗？

Answer 1

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

Answer 2

Esalija的综合答案，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>');
};

Answer 3

您应该使用client side templating engine分隔html结构和业务逻辑，以便在javascript中操作要与模板绑定的数据。

动态DOM元素创建

3 个答案: