XSLDocument.load('planets.xsl');
if (XSLDocument.parseError.errorCode != 0) {
HTMLtarget.innerHTML = 'Error!';
return false;
}
HTMLtarget.innerHTML = XMLDocument.transformNode (XSLDocument);
}
.
.
.
Эту часть вы уже видели раньше. Но пользователь теперь может отсортировать таблицу щелчком мыши по массе, радиусу и т.д. Для новой сортировки таблицы я написал функцию sort — ей при щелчке на кнопке передается имя узла (например, «MASS»), по которому нужно провести сортировку. Вот как создаются различные кнопки, показанные на рис. 10.3:
<INPUT ТУРЕ='BUTTON' ONCLICK='sort('NAME')' VALUE='Sort by name'></INPUT>
<INPUT TYPE='BUTTON' ONCLICK='sort('MASS')' VALUE='Sort by mass'></INPUT>
<INPUT TYPE='BUTTON' ONCLICK='sort('RADIUS')' VALUE='Sort by radius'></INPUT>
<INPUT TYPE='BUTTON' ONCLICK='sort('DAY')' VALUE='Sort by day'></INPUT>
Затем в функции sort я хочу выполнить новую сортировку по имени переданного узла. Для этого я изменяю атрибут select элемента <xsl:sort> на имя нового узла, по которому нужно сортировать. Вот как теперь выглядит атрибут select.
<xsl:apply-templates select='/PLANETS/PLANET'>
<xsl:sort select='NAME' order='ascending'/>
</xsl:apply-templates>
Я могу обратиться к этому узлу из таблицы стилей, теперь хранимой в объекте XSLDocument, передав в метод selectSingleNode упомянутого объекта выражение XPath. Метод selectSingleNode возвращает объект node, и можно изменить текстовое значение узла при помощи свойства nodeValue объекта node. В таком случае я только устанавливаю атрибут select в имя нового узла, по которому будет вестись сортировка:
<HTML>
<HEAD>
<TITLE>
Applying Dynamic Styles
</TITLE>
<SCRIPT LANGUAGE='JavaScript'>
function initialize() {
.
.
.
}
function sort(sortNode) {
(XSLDocument.selectSingleNode ('//xsl:sort/@select')).nodeValue
= sortNode;
.
.
.
}
</SCRIPT>
.
.
Теперь все, что осталось сделать, — снова выполнить преобразование и вывести результаты:
<HTML>
<HEAD>
<TITLE>
Applying Dynamic Styles
</TITLE>
<SCRIPT LANGUAGE='JavaScript'>
function initialize() {
.
.
.
}
function sort(sortNode) {
(XSLDocument.selectSingleNode('//xsl:sort/@select')).nodeValue
= sortNode;
HTMLtarget.innerHTML = XMLDocument.transformNode (XSLDocument);
}
</SCRIPT>
</HEAD>
.
.
.
Операция завершена. Результаты показаны на рис. 10.3. При щелчке на кнопке таблица сортируется заново по выбранному значению узла (имейте в виду, что сортировка ведется по алфавиту; сортировка по числовым значениям обсуждается в главе 5, где описывается элемент <xsl:sort>) и отображается еще раз с новым порядком сортировки. Вот вся HTML-страница (листинг 10.3).
<HTML>
<HEAD>
<TITLE>
Applying Dynamic Styles
</TITLE>
<SCRIPT LANGUAGE='JavaScript'>
var XMLDocument;
var XSLDocument;
var HTMLtarget;
function initialize() {
XMLDocument = new ActiveXObject('MSXML2.DOMDocument.3.0');
