| | | | |||
|
|||
|
|
|||
Главная  Программирование Java Как создать таблицу программно |
|||
Как создать таблицу программноОглавлениеКак создать таблицу программно Страница 2 Страница 1 из 2 Проблема Я хочу создать на странице таблицу, причем программно, из Web-сценария. Это сложно? Решение 1 Самое простое и действенное— создать строку, содержащую HTML-код таблицы, и вывести его на нужное место страницы методом write объекта document. Пример Вот HTML-код страницы, программно выводящей на экран таблицу: <HTML> <HEAD> <TITLE>Таблица, выводимая программно</TITLE> </НЕМ» <BODY> <SCRIPT TYPE="text/javascript"> var s = "<TABLE>"; s += " <CAPTION>Таблица, выводимая программно</CAPTION>" ; s += "<THEAD><TR><TH>Столбец 1</ТН><ТН>Столбец 2</ТН><ТН>Столбец 3</TH></TR></THEAD>"; s += "<TBODY>"; var t = 1; for (var i = 0; i < 3; i++) { s += "<TR>"; for (var j = 0; j < 3; j++) { s += "<TD>" + t.toString() + "</TD>"; t++; } s += "</TR>"; } S += "</TBODY>"; s += "<TFOOT><TR><TD>l</TD><TD>2</TD><TD>3</TD></TR></TFOOT>"; s += "</TABLE>"; document.write(s); </SCRIPT> </BODY> </HTML> Народ советует Если нужно перерисовывать созданную таким способом таблицу, нам придется добавить в тег <table> атрибут id и с его помощью задать имя таблицы. Тогда мы сможем получить доступ к самой этой таблице и изменить ее содержимое с помощью методов и свойств DOM (как это сделать, будет описано далее). Решение 2 Несравнимо более трудоемкое, использующее методы и свойства DOM. Давайте разберем по шагам наши действия в этом случае. 1. Создаем саму таблицу с помощью метода createElement объекта document. Единственным параметром этому методу нужно передать строку "TABLE" — имя тега, которым создается таблица. 2. Создаем заголовок таблицы, если он нужен. Для этого передадим методу createEiement объекта document строку "CAPTION". 3. Создаем текстовый фрагмент, который станет заголовком таблицы. Для этого используем метод createTextNode объекта document и передадим ему в качестве параметра нужный текст. 4. Присоединяем созданный текстовый фрагмент к заголовку таблицы. Для этого используем метод appendchild экземпляра объекта— заголовка таблицы и в качестве параметра передадим ему только что созданный текстовый фрагмент. 5. Присоединяем созданный заголовок таблицы к самой таблице. Для этого используем метод appendchild экземпляра объекта — таблицы и в качестве параметра передадим ему только что созданный экземпляр объекта — заголовок. 6. Создаем секцию таблицы. Для этого методу createEiement объекта document нужно передать строку, соответствующую имени тега, с помощью которого создается эта секция ("THEAD", "TBODY" или "TFOOT"). 7. Присоединяем секцию к таблице, используя метод appendchild экземпляра объекта— таблицы. В качестве параметра передадим этому методу только что созданный экземпляр объекта — секцию таблицы. 8. Создаем строку этой секции таблицы. Параметр метода createEiement объекта document — строка "TR". 9. Присоединяем строку к секции таблицы, используя метод appendchild экземпляра объекта — секции. В качестве параметра передадим этому методу только что созданный экземпляр объекта — строку. 10. Создаем ячейку этой секции таблицы. Параметр метода createEiement объекта document — строка "TD" для обычной ячейки или "ТН" для ячейки заголовка. 11. Присоединяем ячейку к строке методом appendchild экземпляра объекта — строки. В качестве параметра передадим этому методу только что созданный экземпляр объекта — ячейку. 12. Создаем содержимое ячейки. Это может быть иерархия тегов или простой текстовый фрагмент. 13. Присоединяем содержимое ячейки к самой ячейке в качестве ее содержимого. Для этого вызываем метод appendchild экземпляра объекта — ячейки с параметром, соответствующим созданному содержимому этой ячейки (фрагменту текста или тегу, создающему это содержимое). 14. Если это не последняя ячейка строки, переходим к шагу 10. 15. Если это не последняя строка секции таблицы, переходим к шагу 8. 16. Если это не последняя секция таблицы, переходим к шагу 6. 17. Присоединяем полностью созданную таблицу к телу страницы. Для этого нужно вызвать метод appendchild экземпляра объекта — тела страницы и передать ему экземпляр объекта — созданную нами таблицу. Народ советует Если мы хотим создать таблицу исключительно средствами DOM, лучше всего создать явно все ее секции (по крайней мере, секцию тела таблицы). Так мы будем уверены, что все свойства DOM для доступа к элементам таблицы, описанные выше, сработают правильно. Народ замечает Да, способ создания таблицы с помощью методов и свойств DOM очень сложен. Но это единственный способ, позволяющий нам впоследствии изменить содержимое таблицы программно без перезагрузки страницы. Пример Перепишем приведенный ранее пример страницы, выводящей на экран таблицу, с использованием только средств DOM. <HTML> <HEAD> <TITLE>Таблица, выводимая программно</TITLE> </HEAD> <BODY> <SCRIPT TYPE="text/javascript"> var tableObject = document.createElement("TABLE"); var captionObject = document.createElement("CAPTION"); var captionTextObject =document.createTextNode("Таблица, выводимая программно"); captionObj ect.appendChild(captionTextObject) ; tableObj ect.appendchild(captionObject); var headSectionObject = document.createElement("THEAD"); var rowObject = document.createElement("TR"); var cellObject = null; var cellTextObject = null; for (var i = 1; i < 4; i++) { cellObject = document.createElement("TH"); cellTextObject = document.createTextNode("Столбец " +i.toString() ) ; cellObject.appendChild(cellTextObject); rowObject.appendChild(cellObject); } headSectionObject.appendChild(rowObject); tableObject.appendChild(headSectionObject); var bodySectionObject = document.createElement("TBODY"); var t = 1; for (i = 0; i < 3; i++) { rowObject = document.createElement("TR"); for (var j = 0; j < 3; j++) { cellObject = document.createElement("TD"); cellTextObject = document.createTextNode(t.toString()); cellObject.appendChild(cellTextObject); rowObject.appendChild(cellObject); t++; } bodySectionObject.appendChild(rowObject); } tableObj ect.appendChild(bodySectionObj ect); var footSectionObject = document.createElement("TFOOT"); rowObj ect = document.createElement("TR"); for (i = 1; i < 4; i++) { cellObject = document.createElement("TD"); cellTextObject = document.createTextNode(i.toString()); cellObject.appendChild(cellTextObject); rowObject.appendChild(cellObj ect); } footSectionObject.appendChild(rowObject); tableObject.appendChild(footSectionObject); document.body.appendChild(tableObject); </SCRIPT> </BODY> </HTML> Решение 3 Использование универсального объекта DynamicTable (листинг 8.1). Функция-конструктор этого объекта имеет очень простой формат вызова: DynamicTable (<Элемент страницы>[, <Имя таблицы>[, <Стилевой класс для таблицы>]]); Первый, единственный обязательный, параметр задает элемент страницы, в котором будет выведена таблица и чьим потомком она станет. Вторым, необязательным, параметром в конструктор передается имя создаваемой таблицы. Это имя передается в строковом виде. Если оно не указано, имя таблицы будет сформировано самим объектом DynamicTable. Третьим, также необязательным, параметром передается имя стилевого класса, который будет привязан к создаваемой таблице. Это имя передается в строковом виде. Если оно не указано, никакого стилевого класса к таблице привязано не будет. Метод createTable объекта DynamicTable формирует таблицу на основе трех массивов, переданных ему в качестве параметров, сохраняет ее в памяти компьютера, но не выводит на экран. Вот формат вызова этого метода: createTable(<Массив секции тела>[, <Массив секции "шапки"> .[, <Массив секции "поддона">[, <Текст заголовка таблицы> [, <Индекс первой строки>, <Индекс последней строки>]]]]); Переданные этому методу три массива задают содержимое, соответственно, секции тела, "шапки" и "поддона" таблицы. Если какой-либо из этих массивов не указан или вместо него было передано значение null, данная секция в таблице создана не будет. Также можно указать текст заголовка таблицы. Все три массива, передаваемые методу createTable, представляют строки соответствующей секции создаваемой таблицы. Каждый элемент такого массива, в свою очередь, содержит вложенный массив, который представляет ячейки данной строки таблицы. Элементы этого вложенного массива могут содержать: экземпляр объекта, который станет содержимым ячейки; строку или число, которые станут содержимым ячейки; пустую строку или пробел, если нужно создать пустую ячейку; одну из псевдоконстант JavaScript, задающих специальные значения. Этих псевдоконстант предусмотрено две (их значения можно увидеть в листинге 8.1): jsps_dt_spamned_horz — данная ячейка будет объединена с ячейкой, расположенной левее; jsps_dt_spanned_vert— данная ячейка будет объединена с ячейкой, расположенной выше. Количество элементов всех вложенных массивов (тех, что представляют ячейки таблицы) должно быть одинаковым. В противном случае мы получим сообщение об ошибке, и таблица не будет создана. Мы можем вывести в таблицу не весь массив секции тела, а его часть. Для ЭТОГО достаточно указать Индекс первой строки И Индекс последней строки, соответствующие элементам массива, которые должны присутствовать в таблице. Не забываем, что индексы элементов массивов нумеруются, начиная с нуля. Если мы хотим создать таблицу на основе данных, которые нигде не хранятся, а, скажем, вычисляются в Web-сценарии, то воспользуемся методом createTableAdvanced объекта DynamicTable. Этот метод также формирует таблицу в памяти без вывода ее на экран. Вот формат его вызова: createTableAdvanced{<Функция, формирующая содержимое таблицы>, <Количество строк секции тела>, <Количество столбцов> [, <Количество строк секции "шапки">, <Количество строк секции "поддона "> [, <Индекс первой строки>, <Индекс последней строки> [, <Дополнительный параметр функции, формирующей содержимое таблицы>]]]); Функция, формирующая содержимое таблицы, переданная в этот метод, должна принимать четыре параметра: номер строки таблицы, номер ячейки в этой строке (нумерация и строк, и ячеек начинается с нуля — не забываем об этом!), значение, задающее секцию таблицы, и Дополнительный параметр, заданный В вызове метода createTableAdvanced. Значения, задающие секцию таблицы, в виде псевдоконстант JavaScript перечислены далее (их значения можно увидеть в листинге 8.1): jsps_dt_ts_caption — заголовок таблицы; jsps_dt_ts_head — секция "шапки" таблицы; jsps_dt_ts_body — секция тела таблицы; jsps_dt_ts_foot — секция "поддона" таблицы. Функция, формирующая содержимое таблицы, должна возвращать значение одного из четырех типов: экземпляр объекта, который станет содержимым ячейки; строку или число, которые станут содержимым ячейки; пустую строку или пробел, если нужно создать пустую ячейку; псевдоконстанту jsps_dt_spanned_horz или jsps_dt_spanned_vert (их назначение было описано ранее). Также обязательно нужно задать Общее количество строк И Количество столбцов таблицы. Иначе объект DynamicTable не будет знать, какого размера таблицу мы хотим создать. (В случае метода createTable количество строк известно — оно равно сумме элементов всех массивов. Также известно количество столбцов — оно равно количеству элементов вложенных массивов.) Также мы можем задать Количество строк секции "шапки" И Количество строк секции "поддона", если хотим создать эти секции. И в этом случае мы можем вывести в таблицу (точнее, в ее секцию тела) не все приготовленные данные, а их часть. Для этого следует указать индекс первой строки И Индекс последней строки, которые ДОЛЖНЫ присутствовать в таблице. Метод showTable объекта DynamicTable выводит сформированную в памяти таблицу на экран. Этот метод не принимает параметров и не возвращает результата. Метод removeTable объекта DynamicTable удаляет таблицу с экрана и из памяти компьютера, после чего она становится недоступной. Этот метод не принимает параметров, не возвращает результата и пригодится, если мы хотим создать заново таблицу на основе других данных. Свойство id объекта DynamicTable предоставляет доступ к имени таблицы. Оно будет полезно, если мы не указали имя таблицы при вызове конструктора этого объекта, и объект сам сформировал для нее имя. А свойство table объекта DynamicTable предоставляет доступ к самой таблице, сформированной в памяти и, возможно, уже выведенной на экран методом showTabie. Используя это свойство, мы можем добраться до самой таблицы и ее элементов, а также использовать готовую таблицу для других нужд (например, поместить ее в ячейку другой таблицы). Листинг 8.1 Объект DynamicTable выводящий на экран таблицу var JSPS_DT_SPANNED_HORZ = "!!!JSPS_DT_SPANNED_HORZ!!!"; var JSPS_DT_SPANNED_VERT = "!!!JSPS_DT_SPANNED_VERT!!! "; var JSPS_DT_TS_CAPTION = 0; var JSPS_DT_TS_HEAD = 1; var JSPS_DT_TS_BODY = 2; var JSPS_DT_TS_FOOT =3; // Функция-конструктор function DynamicTable(pElement, pID, pClassName) { this.element = pElement; this.id = (pID) ? pID : "tab" + this; this.table = null; this.className = (pClassName) ? pClassName : ""; this.createTable = mjspsDTCreateTable; this.createTableAdvanced = mjspsDTCreateTableAdvanced; this.showTable = mjspsDTShowTable; this.removeTable = mjspsDTRemoveTable; this.createTableTag = mjspsDTCreateTableTag; this.createTableCaption = mjspsDTCreateTableCaption; this.createTableSection = mjspsDTCreateTableSection; } // Функция, реализующая служебный метод createTableTag. // Этот метод создает саму таблицу function mj spsDTCreateTableTag() { this.table = document.createElement("TABLE"); this.table.id = this.id; if (this.className) this.table.className = this.className; } // Служебная функция, формирующая содержимое таблицы и используемая при // вызове метода createTable. (При вызове метода createTableAdvanced // функция, формирующая содержимое таблицы, объявляется самим // программистом) function jspsDTGetCellValue(pRowNumber, pColNumber, pSectionCode,pAdditional) { if (pSectionCode == JSPS_DT_TS_CAPTION) return pAdditional else return pAdditional[pRowNumber][pColNumber]; } // Функция, реализующая служебный метод createTableCaption. Этот метод // создает заголовок таблицы. Он принимает в качестве параметров функцию, // формирующую содержимое таблицы, и дополнительный параметр function mjspsDTCreateTableCaption(pFunction, pAdditional) { var captionText = pFunction(0, 0, JSPS_DT_TS_CAPTION, pAdditional); if (captionText) { var captionObject = document.createElement("CAPTION"); var captionTextObject = document.createTextNode(captionText); captionObject.appendChild(captionTextObject); this.table.appendChild(captionObject); } } // Функция, реализующая служебный метод createTableSection. Этот метод // создает секцию таблицы и заполняет ее данными. Он принимает такие // параметры: код секции, функцию, формирующую содержимое таблицы, // количество строк секции, количество столбцов, номер первого выводимого // элемента, номер последнего выводимого элемента и дополнительный // параметр function mjspsDTCreateTableSection(pSectionCode, pFunction, pRowCount, pCellCount, pFirstElementIndex, pLastElementIndex, pAdditional) { if (pRowCount > 0) { if (typeof(pFirstElementlndex) == "undefined") pFirstElementlndex = 0; if (typeof(pLastElementlndex) == "undefined") pLastElementlndex = pRowCount - 1; switch (pSectionCode) { case JSPS_DT_TS_HEAD: var sectionTag = "THEAD"; var cellTag = "TH"; break; case JSPS_DT_TS_BODY: var sectionTag = "TBODY"; var cellTag = "TD"; break; case JSPS_DT_TS_FOOT: var sectionTag = "TFOOT"; var cellTag = "TD"; break; } var sectionObject = document.createElement(sectionTag); var rowObject = null; var cellObject = null; var cellContentObject = null; var leftCell = null; var horzSpannedCellCount = 1; var topCells = new Array(); var vertSpannedCellCounts = new Array(); for (var i = pFirstElementlndex; i <= pLastElementIndex; i++) { rowObject = document.createElement("TR"); for (var j =0; j < pCellCount; j++) { cellObject = document.createElement(cellTag); var cellContent = pFunction(i, j, pSectionCode, pAdditional) ; if (cellContent == JSPS_DT_SPANNED_HORZ) { horzSpannedCellCount++; leftCell.colSpan = horzSpannedCellCount; } else if (cellContent == JSPS_DT_SPANNED_VERT) { vertSpannedCellCounts[j]++; topCells[j].rowSpan = vertSpannedCellCounts[j]; } else { switch (typeof(cellContent)) { case "object": cellContentObject = cellContent; break; case "string": if (cellContent == "") cellContent = " "; cellContentObject = document.createTextNode(cellContent); break; case "number": cellContentObject = document.createTextNode (cellContent.toString()); break; default: cellContentObject = document.createTextNode(" "); break; } leftCell = eel10bject; horzSpannedCellCount = 1; topCells[j] = cellObject; vertSpannedCellCounts[j] = 1; cellObj ect.appendChild(cellContentObject); rowObject.appendChild(cellObject); } } sectionObject.appendChild(rowObject); } this.table.appendChild(sectionObject); } } // Функция, реализующая метод createTable function mjspsDTCreateTable(pBodyArray, pHeadArray, pFootArray, pCaption, pFirstElementIndex, pLastElementlndex) { this.removeTable(); this.createTableTag(); // Заметим, что в этом случае методам createTableCaption и // createTableSection мы передаем объявленную ранее служебную функцию // jspsDTGetCellValue if (pCaption) this.createTableCaption(jspsDTGetCellValue, pCaption); if (pHeadArray) this.createTableSection(JSPS_DT_TS_HEAD, jspsDTGetCellValue, pHeadArray.length, pHeadArray[0].length, 0, pHeadArray.length - 1, pHeadArray); this.createTableSection(JSPS_DT_TS_BODY, j spsDTGetCellValue, pBodyArray.length, pBodyArray[0].length, pFirstElementlndex, pLastElementIndex, pBodyArray); if (pFootArray) this.createTableSection(JSPS_DT_TS_FOOT, jspsDTGetCellValue, pFootArray.length, pFootArray[0].length, 0, pFootArray.length - 1, bpFootArray); } // Функция, реализующая метод createTableAdvanced function mjspsDTCreateTableAdvanced(pFunction, pBodyRowCount, pCellCount, pHeadRowCount, pFootRowCount, pFirstElementIndex, pLastElementIndex, pAdditional) { this.removeTable() ; this,createTableTag(); this.createTableCaption(pFunction); if (pHeadRowCount > 0} this.createTableSection(JSPS_DT_TS_HEAD, pFunction, pHeadRowCount, pCellCount) ; this.createTableSection(JSPS_DT_TS_BODY, pFunction, pBodyRowCount, pCellCount, pFirstElementlndex, pLastElementlndex); if (pFootRowCount > 0) this.createTableSection(JSPS_DT_TS_FOOT, pFunction, pFootRowCount, pCellCount) ; } // Функция, реализующая метод showTable function mjspsDTShowTable() { if (this.table) this.element.appendChild(this.table); } // Функция, реализующая метод removeTable function mjspsDTRemoveTable() { if (this.table) { this.element.removeChild(this.table); this.table = null; } } Хорошая идея! Поместите объявление этого объекта в файл сценариев dynamictable.js. Впоследствии, чтобы использовать его, достаточно будет просто подключить к Web-странице этот файл сценариев с помощью тега: <SCRIPT SRC="dynamictable.js"></SCRIPT> Пред. - След. » |
Архив статей
СИ-БИ техника
КВ техника УКВ техника Радиоизмерения Защита от TVI Источники питания Софт Расчеты Справочники СИ-БИ техника
|
||
