Например, так
| Код |
db.xml (сохранить нужно в utf-8)
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<Row>
<Col> </Col>
<Col> </Col>
<Col>Побеги</Col>
<Col> </Col>
<Col>Хвоя</Col>
<Col> </Col>
<Col> </Col>
<Col> </Col>
<Col> </Col>
<Col>Шишки</Col>
<Col> </Col>
<Col> </Col>
</Row>
<Row>
<Col>Название рода</Col>
<Col>Изображение</Col>
<Col>Типы побегов</Col>
<Col>Наличие подушечек</Col>
<Col>Расположение на побеге</Col>
<Col>Сезон. изм.</Col>
<Col>Кол-во в пучках</Col>
<Col>Форма хвоинок</Col>
<Col>Форма верхушки</Col>
<Col>Располож. на побеге</Col>
<Col>При созревании</Col>
<Col>Соотн. кроющ. и семенных чешуй</Col>
</Row>
<Row>
<Col>Larix</Col>
<Col>img/1.gif</Col>
<Col>1</Col>
<Col>4</Col>
<Col>5</Col>
<Col>8</Col>
<Col>10</Col>
<Col>12</Col>
<Col>15</Col>
<Col>0</Col>
<Col>24</Col>
<Col>27</Col>
</Row>
<Row>
<Col>Pinus</Col>
<Col>img/2.gif</Col>
<Col>1</Col>
<Col>4</Col>
<Col>6</Col>
<Col>9</Col>
<Col>11</Col>
<Col>13</Col>
<Col>16</Col>
<Col>1</Col>
<Col>25</Col>
<Col>28</Col>
</Row>
<Row>
<Col>Picea</Col>
<Col>img/3.gif</Col>
<Col>2</Col>
<Col>3</Col>
<Col>7</Col>
<Col>9</Col>
<Col>-</Col>
<Col>14</Col>
<Col>16</Col>
<Col>0</Col>
<Col>24</Col>
<Col>29</Col>
</Row>
<Row>
<Col>Pseudotsuga</Col>
<Col>img/4.gif</Col>
<Col>2</Col>
<Col>3</Col>
<Col>7</Col>
<Col>9</Col>
<Col>-</Col>
<Col>12</Col>
<Col>17</Col>
<Col>1</Col>
<Col>24</Col>
<Col>30</Col>
</Row>
<Row>
<Col>Abies</Col>
<Col>img/5.gif</Col>
<Col>2</Col>
<Col>4</Col>
<Col>7</Col>
<Col>9</Col>
<Col>-</Col>
<Col>12</Col>
<Col>18</Col>
<Col>0</Col>
<Col>26</Col>
<Col>29</Col>
</Row>
<Row>
<Col>Tsuga</Col>
<Col>img/6.gif</Col>
<Col>2</Col>
<Col>3</Col>
<Col>7</Col>
<Col>9</Col>
<Col>-</Col>
<Col>12</Col>
<Col>19</Col>
<Col>1</Col>
<Col>24</Col>
<Col>31</Col>
</Row>
</Root>
|
| Код |
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<!-- form ----------------------------------------------------------------- -->
<form name="" action="" method="" onSubmit="return false" enctype="multipart/form-data">
<table width="500" border="2" align="center" cellpadding="0" cellspacing="0">
<tr>
<th colspan="2" scope="col">ПОБЕГИ</th>
</tr>
<tr>
<td colspan="2" bgcolor="#00FF66"><div align="center">Типы побегов</div></td>
</tr>
<tr>
<td width="32">1</td>
<td width="368"><label>
<input type="checkbox" name="1" id="checkbox1" checked />
Ауксибласты и брахибласты</label></td>
</tr>
<tr>
<td>2</td>
<td><label>
<input type="checkbox" name="2" id="checkbox2" checked />
Только ауксибласты</label></td>
</tr>
<tr>
<td colspan="2" bgcolor="#00FF66"><div align="center">Наличие подушечек</div></td>
</tr>
<tr>
<td>3</td>
<td><label>
<input type="checkbox" name="3" id="checkbox3" checked />
Есть</label></td>
</tr><tr>
<td>4</td>
<td><label>
<input type="checkbox" name="4" id="checkbox4" checked />
Нет</label></td>
</tr>
<tr>
<td colspan="2"><div align="center"><strong>ЛИСТЬЯ</strong></div></td>
</tr>
<tr>
<td colspan="2" bgcolor="#00FF66"><div align="center">Расположение</div></td>
</tr>
<tr>
<td>5</td>
<td><label>
<input type="checkbox" name="5" id="checkbox5" checked />
На брахибл. в пучках, на ауксибл. спирально по одному</label></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Показать" onClick="main(false)"/></td>
</tr>
</table>
</form>
<!-- form end ------------------------------------------------------------- -->
<div id="output_block" style="border:1px solid #ff0000"> </div>
<script>var out_el = document.getElementById('output_block');</script>
<script>
// 1. делаем запрос к БД, т.е. загружаем xml
// !!! работает в mozilla, в ie не будет !!!
var oXML = new XMLHttpRequest();
oXML.open('get', 'db.xml', false);
oXML.send(null);
var root = oXML.responseXML;
// проверка
out_el.innerHTML = root.getElementsByTagName('Row').length; // "8"
// 2. парсим тело полученного документа в массив
var Arr = new Array();
var xml_tr = root.getElementsByTagName('Row');
var xml_td;
for(i=0; i<xml_tr.length; i++){
xml_td = xml_tr[i].getElementsByTagName('Col');
Arr[i] = new Array();
for(j=0; j<xml_td.length; j++){
Arr[i][j] = xml_td[j].firstChild.data;
}
}
// проверка
out_el.innerHTML = Arr[1][8]; // "Форма верхушки"
var el_table;
function main(fstStart){
if(!fstStart) {document.body.removeChild(el_table); el_table = null;}
// 3. отфильтровываем по параметрам
// 3.1 набираем массив выбранных параметров
var was_checked = new Array();
var checkboxes = document.getElementsByTagName('input');
for(i=0; i<checkboxes.length; i++)
if(checkboxes[i].checked) was_checked[i] = checkboxes[i].name;
// проверка
var str = ""; for(i=0; i<was_checked.length; i++) str = str + was_checked[i] + ", ";
out_el.innerHTML = str; // "1, 2, 3, 4, 5, "
// 3.2 фильтруем по параметрам
var result_rows = new Array();
var totalCounter = 0; var chk = true;
for(i=0; i<was_checked.length; i++){ // берем каждый выбранный параметр
for(j=0; j<Arr.length; j++){ // и сравниваем с каждым из параметров массива БД
for(k=2; k<Arr[j].length; k++){ // (которые располагаются в нескольких столбцах)
if(was_checked[i]==Arr[j][k]){ // составляем массив, значения которого -
// ячейки, кот. необходимо отобразить
for(n=0; n<result_rows.length; n++){ // проверка на повторяемость
if(result_rows[n]==j) chk = false;
}
if(chk){
result_rows[totalCounter] = j;
totalCounter++; chk = true;
}
}
}
}
}
// проверка
out_el.innerHTML = result_rows.length; // "2"
// 4. выводим таблицу
var el_tr, el_td1, el_td2, el_td3;
el_table = document.createElement('table');
el_table.border = "1";
// проход по всем строкам сформированного массива result_rows
for (i=0; i<result_rows.length; i++){
n = parseInt(result_rows[i]);
add_row(Arr[n][0], Arr[n][1], " ");
}
// добавляем таблицу в тело документа
document.body.appendChild(el_table);
}
main(true);
// 4.1 функция, которая формирует строку таблицы результатов
function add_row(item1, item2, item3){
el_tr = document.createElement('tr');
el_td1 = document.createElement('td');
el_td2 = document.createElement('td');
el_td3 = document.createElement('td');
el_tr.appendChild(el_td1);
el_tr.appendChild(el_td2);
el_tr.appendChild(el_td3);
el_table.appendChild(el_tr);
el_td1.innerHTML = item1;
el_td2.innerHTML = item2;
el_td3.innerHTML = item3;
}
</script>
</body>
</html>
|
|