Java



             

Сортировка таблицы средствами JavaScript - часть 6


Здесь нет ничего сложного: в таблице присутствует аттрибут id = "table", чтобы из функции можно было обратиться к этому узлу. Также присутствуют строка с именами колонок и вызовом функции выбора сортировки и tbody с id = "tablebody". Зачем необходим tbody? Netscape Navigator 7.1 и вообще все браузеры на движке Gecko, а также Opera, не требуют этого элемента при динамическом создании таблицы. Но только вот этот элемент жизненно необходим, если вы хотите увидеть результат в браузере Internet Explorer. Если, создавая таблицу функциями DOM, вы пропустите создание такого элемента, то результата не увидите. Как создается таблица? Вот эта функция: Листинг 9 :

1 function createTable( cStart, cType, cSize, cChange ) { 2 var tabbd = document.getElementById( "tablebody" ); 3 4 if( !tabbd ) { 5 var table = document.getElementById( "table" ); 6 var tbody = document.createElement( "tbody" ); 7 tbody.id = "tablebody"; 8 table.appendChild( tbody ); 9 tabbd = document.getElementById( "tablebody" ); 10 } 11 12 while( tabbd.hasChildNodes() ) { 13 var tmp = tabbd.childNodes[ 0 ]; 14 tabbd.removeChild( tmp ); 15 } 16 17 for( var counter = cStart; eval( counter + cType + cSize ); eval( "counter" + cChange ) ) { 18 var tr = document.createElement( "tr" ); 19 20 var td = document.createElement( "td" ); 21 var tdtxt = document.createTextNode( txt[ counter ].years ); 22 td.appendChild( tdtxt ); 23 tr.appendChild( td ); 24 td = document.createElement( "td" ); 25 tdtxt = document.createTextNode( txt[ counter ].books ); 26 td.appendChild( tdtxt ); 27 tr.appendChild( td ); 28 td = document.createElement( "td" ); 29 tdtxt = document.createTextNode( txt[ counter ].authors ); 30 td.appendChild( tdtxt ); 31 tr.appendChild( td ); 32 tabbd.appendChild( tr ); 33 } 34 }

Целью этой статьи не является объяснение основ DOM. Поэтому я остановлюсь только на наиболее важном моменте - необычном условии цикла for. Итак, createTable принимает четыре аргумента. Первый из них (cStart) - определяет значение счетчика в цикле for. Второй (cType) - тип сравнения, то есть значения ">", "<" и т.д. Третий аргумент ( cSize ) определяет значение, при сравнении с которым прекращается цикл. Четвертое же значение (cChange) может становиться инкрементом или декрементом, в зависимости от требования сортировки. Желательно подробно разобраться в этой строке кода, она достаточно важна. Без этих четырех аргументов пришлось бы писать несколько отдельных функций, которые бы различались только в этой строке. Этот прием достаточно удобный для общего применения, и я не исключаю возможности, что вы захотите его использовать в своих функциях.

Осталась последняя функции - allocator, которая, собственно, и управляет всеми сортировками и созданием таблицы. Листинг 10 :




Содержание  Назад  Вперед