在jQuery中創建表格

我需要從接收到ajax調用的數組中創建表格。我正在創建一個4列表，目前正在使用......這可行但看起來很糟糕和錯誤。有更清潔，更容易閱讀的方式來寫這個？在jQuery中創建表格

$("div#ColorChart").append('<tr class="colorRow"><td class="colorIDCell" style="border:thin solid;width:100px">#'+val[0]+'</td><td class="symbolCell" style="border:thin solid;width:20px;text-align:center"><img src="images/symbols/'+val[2]+'.png" width="22" height="22" alt="#'+val[2]+'"/></td><td class="colorRGBCell" style="border:thin solid;width:20px" bgcolor="#'+val[1]+'">&nbsp;</td><td class="colorNameCell">'+i+'</td></tr>'+"\n");

來源

2012-01-28 maddogandnoriko

你可以創建一個字符串並用'string + =「另一個html行」'添加可讀行「，然後只需附加字符串'.append（string）' – mreq 2012-01-28 21:39:40

這可能是我會做的。刪除樣式並創建一個字符串，然後附加它。謝謝。 – maddogandnoriko 2012-01-28 21:52:56

我看不錯，但我建議你使用一個單獨的css文件來設計你的元素。

而且也，當我添加HTML使用jQuery我做這樣的事情：

$("div#ColorChart").append(
'<tr class="colorRow">' + 
    '<td class="colorIDCell" style="border:thin solid;width:100px">#'+val[0]+'</td>' + 
    '<td class="symbolCell" style="border:thin solid;width:20px;text-align:center">' + 
     '<img src="images/symbols/'+val[2]+'.png" width="22" height="22" alt="#'+val[2]+'"/>' + 
    '</td>' + 
    '<td class="colorRGBCell" style="border:thin solid;width:20px" bgcolor="#'+val[1]+'">&nbsp;</td>' + 
    '<td class="colorNameCell">'+i+'</td>' + 
'</tr>'+"\n");

希望我幫助！

來源

2012-01-28 21:45:19 19greg96

擺脫所有內聯樣式，並使用類來應用樣式。這是更好的做法，並且會擺脫很多你的代碼。

來源

2012-01-28 21:41:20

你應該考慮使用類似模板與

https://github.com/janl/mustache.js
或者
http://documentcloud.github.com/underscore/

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.2/underscore-min.js"></script> 
<script type="text/html" id="template"> 

     <tr> 
      <td> 
       <%= data[0] %> 
      </td> 
      <td> 
       <%= data[1] %> 
      </td> 
      <td> 
       <%= data[2] %> 
      </td> 
     </tr> 

</script> 
<script> 
$(function(){ 
    var template = _.template($("#template").html()); 
    $("#ColorChart").append(template({ data: ['Data 1','Data 2','Data 3'] })); 
}); 
</script> 

<table id="ColorChart"> 

</table>

這是使用UnderscoreJS一個簡單的例子，但它應該讓你開始！

這裏是工作提琴http://jsfiddle.net/jcreamer898/PCYgj/

它通常被認爲是很好的做法，單獨的HTML從JS儘可能多，再加上它的方式更好看......

來源

2012-01-28 21:44:20 jcreamer898

你應該看看underscore.js template

它真棒你想要做什麼。

<script type="text/html" id="template"> 
<tr class="colorRow"> 
<td class="colorIDCell" style="border:thin solid;width:100px">#<%= val0 %></td> 
<td class="symbolCell" style="border:thin solid;width:20px;text-align:center"> 
<img src="images/symbols/<%= val2 %>.png" width="22" height="22" alt="#<%= val2 %>"/></td><td class="colorRGBCell" style="border:thin solid;width:20px" bgcolor="#<%= val1 %>">&nbsp;</td> 
<td class="colorNameCell"><%= index %></td> 
</tr> 
</script> 

var template = _.template($("#template").text()); 
//loop around you array 
var html = template({'val0': val[0], 'val1': val[1], 'val2': val[2], 'index' : i}); 
$("div#ColorChart").append(html);

此外，不要使用內聯樣式。使你的代碼更清潔

來源

2012-01-28 21:49:25 Decrypter

在jQuery中創建表格

回答

相關問題