[JS, jQuery] Вывод массива в столбцы таблицы

Подскажите, пожалуйста, как можно вывести элементы массива в таблицу.

Есть, к примеру, массивы:

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }

arr1 = [21, 22.5, 15, 6, 8];
arr2 = [17, 15.5, 12, 6, 4];
arr3 = [14, 25.5, 10, 4, 7];
arr4 = [36, 10.5, 88, 21, 12];
 


Необходимо вывести в таблицу так:

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }

<table>
<tr>
<td>21</td>
<td>22.5</td>
<td>15</td>
<td>6</td>
<td>8</td>
</tr>
...
<tr>
<td>36</td>
<td>10.5</td>
<td>88</td>
<td>21</td>
<td>12</td>
</tr>
</table>
 


Если возможно, как-то упростить ID, скажем так, чтобы была задана 1 функция с ID+1 и выводилась вся таблица до последнего ID.

По данному запросу ничего не удалось найти.

Заранее благодарен.

1 ответов


В общем, нашлось решение (не так, как хотелось, тем не менее....), возможно, кому-то будет полезным:


var orderArray = [
    ["1", "29-Aug-2012", "Product1", "client1"],
    ["2", "29-Aug-2012", "Product2", "client2"],
    ["3", "29-Aug-2012", "Product3", "client3"],
    ["4", "29-Aug-2012", "Product4", "client4"],
    ["5", "29-Aug-2012", "Product5", "client5"]
    ];

function display() {
    // get handle on div  
    var container = document.getElementById('container');
    // create table element
    var table = document.createElement('table');
    var tbody = document.createElement('tbody');
    // loop array
    for (i = 0; i < orderArray.length; i++) {
        // get inner array
        var vals = orderArray[i];
        // create tr element
        var row = document.createElement('tr');
        // loop inner array
        for (var b = 0; b < vals.length; b++) {
            // create td element
            var cell = document.createElement('td');
            // set text
            cell.textContent = vals[b];
            // append td to tr
            row.appendChild(cell);
        }
        //append tr to tbody
        tbody.appendChild(row);
    }
   
    // append tbody to table
    table.appendChild(tbody);
    // append table to container
    container.appendChild(table);
}

display();
 

В html вывод осуществляется с помощью:


<div id="container"></div>
 

И необходимо подключить библиотеку jQuery.