Создание таблицы в jQuery - PullRequest
Новая
       12

Создание таблицы в jQuery

0 голосов
/ 29 января 2012

Мне нужно создать таблицу из массива, полученного с помощью вызова 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");

Ответы [ 4 ]

3 голосов
/ 29 января 2012

Вам следует подумать об использовании чего-то вроде шаблонов с

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 настолько часто, насколько это возможно, плюс это выглядит намного лучше ...

1 голос
/ 29 января 2012

Выглядит хорошо для меня, но я предлагаю вам использовать отдельный файл 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");

Надеюсь, я помог!

1 голос
/ 29 января 2012

Избавьтесь от всех встроенных стилей и используйте вместо них классы для применения стилей. Это лучшая практика, и она избавит вас от большого количества кода.

0 голосов
/ 29 января 2012

Вы должны взглянуть на шаблон underscore.js

Это потрясающе для того, что вы хотите сделать. 

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

Кроме того, не используйте встроенные стили. Делает ваш код чище

...