[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.
По данному запросу ничего не удалось найти.
Заранее благодарен.
Есть, к примеру, массивы:
/** * 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.