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代碼

回答

相關問題