Тази публикация в блога ще демонстрира процеса за създаване на динамична таблица в JavaScript.
Как да създадете таблица динамично в JavaScript?
Нека видим пример, обясняващ как ще бъде създадена динамична таблица в JavaScript.
Пример
За да започнете, напишете следните редове в нов HTML документ, за да създадете формуляр, който приема данни и след това ги показва в таблица, като ги добавя динамично:
< div id = 'моята форма' >
< h4 > Попълнете формата по-долу : h4 >
< етикет > Име : етикет >
< тип вход = 'текст' документ за самоличност = 'име' >< бр >< бр >
< етикет > Пол : етикет >
< тип вход = 'текст' документ за самоличност = 'пол' >< бр >< бр >
< етикет > Обозначаване : етикет >
< тип вход = 'текст' документ за самоличност = 'обозначаване' >< бр >< бр >
< етикет > Присъединяване Дата : етикет >
< тип вход = 'дата' документ за самоличност = 'дата' >< бр >< бр >
< идентификатор на бутона = 'добави' стойност = 'Добави' > Добавете данни към таблицата бутон >
див >
В горния кодов фрагмент:
- Първо създайте заглавие „ Попълнете формуляра по-долу: ”.
- Създайте полета за въвеждане за „ Име ”, “ Пол ”, “ Обозначаване ', и ' Дата на присъединяване ' с присвоен идентификатор ' име ”, “ пол ”, “ обозначаване ', и ' дата ”, съответно, за да вземе входните стойности от потребителя.
- Тези идентификатори се използват за получаване на препратка към елементите в JavaScript.
- След това създайте бутон с „ onclick ”, което ще извика „ addTableRow() ” във файл на скрипт, за да добавите и покажете данните в таблица:
Тук, в HTML файла, напишете тези редове код, за да създадете структура на таблица, където данните ще се добавят динамично:
< див >
< h4 > Досие на служител b > h4 >
< център >
< идентификатор на таблица = 'tableData' граница = '1' cellpadding = 'две' >
< тр >
< td >< b > Име b > td >
< td >< b > Пол b > td >
< td >< b > Обозначаване b > td >
< td >< b > Дата на присъединяване b > td >
тр >
маса >
център >
див >
В горния код:
- Създайте таблица с идентификатор „ tableData ”, който ще се използва във файла на скрипта, за да се получи препратката към тази таблица и след това да се добавят данните към нея.
- Таблицата съдържа четири колони, „ Име ”, “ Пол ”, “ Обозначаване ', и ' Дата на присъединяване ”, който ще съхранява данни според имената на колоните.
Изпълнението на HTML файла ще доведе до следния изход на браузъра:
Нека добавим функционалност за динамично създаване на таблици с помощта на JavaScript. Във файла или маркера на скрипта използвайте кода по-долу, който динамично ще създаде таблица:
функция addTableRow ( ) {беше име = документ. getElementById ( 'име' ) ;
беше пол = документ. getElementById ( 'пол' ) ;
беше обозначаване = документ. getElementById ( 'обозначаване' ) ;
беше дата = документ. getElementById ( 'дата' ) ;
беше маса = документ. getElementById ( 'tableData' ) ;
беше rowCount = маса. редове . дължина ;
беше ред = маса. вмъкване на ред ( rowCount ) ;
ред. вмъкване на клетка ( 0 ) . innerHTML = име. стойност ;
ред. вмъкване на клетка ( 1 ) . innerHTML = пол. стойност ;
ред. вмъкване на клетка ( две ) . innerHTML = обозначаване. стойност ;
ред. вмъкване на клетка ( 3 ) . innerHTML = дата. стойност ;
}
В горния фрагмент:
- Първо, дефинирайте функция ' addTableRow() ”, който ще задейства събитието за щракване на HTML бутона.
- След това вземете справката за всички полета за въвеждане едно по едно, като използвате съответните им присвоени идентификатори, като използвате „ getelementById() ” и ги съхранявайте в променливи.
- Тези променливи ще се използват за получаване на стойността на полетата за въвеждане с помощта на HTML “ стойност ” и ги задайте в отделните клетки в таблицата с помощта на „ innerHTML ' Имот.
- Добавете редове в таблица, като използвате „ таблица.редове.дължина ” и след това съхранява стойности в него.
Изход
Горният резултат показва, че динамичната таблица е създадена успешно чрез добавяне на данни във формуляр с помощта на JavaScript.
Заключение
Динамичната таблица се създава с помощта на различните свойства на HTML с предварително дефинирани методи на JavaScript. Първо създайте формуляр в HTML файл и след това вземете препратката към полетата, като използвате предварително дефинирани методи на JavaScript, като например „ getElementById() ' и след това извлечете въведените им стойности с помощта на ' стойност ' Имот. Задайте тези стойности в съответните колони на таблицата, като използвате „ innerHTML ' Имот. Тази публикация в блога демонстрира процеса за създаване на динамична таблица в JavaScript.