Question

我需要从收到ajax调用的数组中创建一个表。我正在创建一个4列表，目前正在使用......但是看起来很糟糕而且看起来很糟糕。是否有更清晰，更易读的方式来写这个？

$("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");

Answer 1

你应该考虑使用像

这样的模板

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分开是好的做法，而且看起来更好......

Answer 2

摆脱所有内联样式，并使用类来应用样式。这是更好的练习，并且会消除很多代码。

Answer 3

对我来说很好看，但我建议您使用单独的css文件来设置元素的样式。

而且，当我用jquery添加html时，我会做这样的事情：

$("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");

希望我帮忙！

Answer 4

您应该查看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);

另外，请勿使用内联样式。使您的代码更清洁

在jQuery中创建一个表

4 个答案: