Howto返回带有JavaScript功能的HTML代码

这个问题困扰了我很长一段时间。有没有更好的方法来做到这一点，因为这是非常困难的代码和维护？Howto返回带有JavaScript功能的HTML代码

function format_details (d) { 
 
    var r = ''; 
 
    var vaste_afspraak = (d.werkbon.werkbonafspraaktype_id == 1)? 'JA': 'NEE'; 
 
    r += '<div class="well no-padding"><table id="dt_details" class="table table-bordered table-condensed" class="display" width="100%">'; 
 
    r += '<tbody>'; 
 
    r += '<tr>'; 
 
     r += '<th colspan="2" class="text-center">#' + d.werkbon.id + ' - Details werkbon ' + d.werkbon.nummer + '</th>'; 
 
    r += '</tr>'; 
 
    r += '<tr>'; 
 
     r += '<th style="width:20%;">Locatie naam</th>'; 
 
     r += '<td>' + d.werkbon.locatie_naam + '</td>'; 
 
    r += '</tr>'; 
 
    r += '<tr>'; 
 
     r += '<th>Adres</th>'; 
 
     r += '<td>' + d.werkbon.locatie_adres + '</td>'; 
 
    r += '</tr>'; 
 
    r += '<tr>'; 
 
     r += '<th>PC Plaats</th>'; 
 
     r += '<td>' + d.werkbon.locatie_postcode + ' ' + d.werkbon.locatie_woonplaats + '</td>'; 
 
    r += '</tr>'; 
 
    r += '</tbody>'; 
 
    r += '</table></div>'; 
 
    return r; 
 
}

来源

2016-01-22 PCvanWijk

我投票结束这个问题，因为它要求[代码评论]（http://codereview.stackexchange.com/help/on-topic） – Quentin

可能[在JavaScript中创建多行字符串]的副本（http://stackoverflow.com/questions/805107/creating-multiline-strings-in-javascript） – gfullam

人们建议使用<script src="...">和<link rel="stylesheet" href="..." />有一个原因：HTML，JavaScript和CSS的分离。

由于很多原因，我建议不要将大量的HTML转储到JavaScript文件中。

相反，考虑在HTML中定义HTML。一种技术可能是：

<script type="text/html" id="template-details"> 
    <div><table><whatever> 
     <th>Adres</th> 
     <td>{{locatie_adres}}</td> 
    </whatever></table></div> 
</script>

然后，在JavaScript，你可以这样做：

var r = document.getElementById('template-details').innerHTML; 
r = r.replace(/\{\{([a-z0-9_]+)\}\}/g,function(_,key) { 
    return d.werkbon[key]; 
}); 
return r;

这种方式，你必须保存在你的HTML模板，这将是更容易管理，并且在输出之前，JavaScript会把它放入数据中。

个人虽然，我认为一个更明智的选择是发送一个AJAX请求到服务器获取数据，并且服务器可以在其所有的HTML荣耀发送数据。

来源

2016-01-22 14:49:04

虽然确实没有任何必要了格式化代码JS到HTML（空格在浏览器中忽略），您可以通过打印出的标签（\t）为做到这一点必要。

编辑我认为首先你要格式化输出HTML，但如果你想格式化JS功能以及，看看下面：

例如：

function format_details (d) { 
    var vaste_afspraak = (d.werkbon.werkbonafspraaktype_id == 1)? 'JA': 'NEE'; 
    return '<div class="well no-padding"><table id="dt_details" class="table table-bordered table-condensed" class="display" width="100%">' + 
    '\t<tbody>' + 
    '\t\t<tr>' + 
    '\t\t\t<th colspan="2" class="text-center">#' + d.werkbon.id + ' - Details werkbon ' + d.werkbon.nummer + '</th>' + 
    '\t\t</tr>' + 
    '\t\t<tr>' + 
    '\t\t\t<th style="width:20%;">Locatie naam</th>' + 
    '\t\t\t<td>' + d.werkbon.locatie_naam + '</td>' + 
    '\t\t</tr>' + 
    '\t\t<tr>' + 
    '\t\t\t<th>Adres</th>' + 
    '\t\t\t<td>' + d.werkbon.locatie_adres + '</td>' + 
    '\t\t</tr>' + 
    '\t\t<tr>' + 
    '\t\t\t<th>PC Plaats</th>' + 
    '\t\t\t<td>' + d.werkbon.locatie_postcode + ' ' + d.werkbon.locatie_woonplaats + '</td>' + 
    '\t\t</tr>' + 
    '\t</tbody>' + 
    '</table></div>'; 
}

您不需要每行上的r +=;只需在一个声明中添加它们。此外，您根本不需要r;只是返回值而不是创建一个额外的变量。

来源

2016-01-22 14:37:18

一个解决办法是存放在HTML文件模板不是让Ajax调用来检索HTML和使用jQuery改变通过id或class属性的动态内容。代码可能是这样的

$.ajax({ 
async:false, 
url: "fileURL", 
contentType: "text/plain", 
type: "GET" , 
dataType:"text", 
success: function(result) { 
    $(result).find(".text-center").text("enter the text with your variable"); 
    return $(result).html(); 
}, 
error: function(error){ 
    alert (error); 
} 
});

请仔细检查语法。我没有试过

来源

2016-01-22 14:51:58 Antonio

Howto返回带有JavaScript功能的HTML代码

回答

相关问题