Ipapakita ng post sa blog na ito ang proseso para sa paglikha ng isang dynamic na talahanayan sa JavaScript.
Paano Lumikha ng isang Table nang Dinamiko sa JavaScript?
Tingnan natin ang isang halimbawa na nagpapaliwanag kung paano gagawin ang isang dynamic na talahanayan sa JavaScript.
Halimbawa
Upang magsimula, isulat ang mga sumusunod na linya sa isang bagong HTML na dokumento upang lumikha ng isang form na kumukuha ng data at pagkatapos ay ipakita ito sa isang talahanayan sa pamamagitan ng dynamic na pagdaragdag nito:
< div id = 'myform' >
< h4 > Punan ang form sa ibaba : h4 >
< label > Pangalan : label >
< uri ng input = 'text' id = 'pangalan' >< br >< br >
< label > Kasarian : label >
< uri ng input = 'text' id = 'kasarian' >< br >< br >
< label > Pagtatalaga : label >
< uri ng input = 'text' id = 'pagtatalaga' >< br >< br >
< label > Pagsali Petsa : label >
< uri ng input = 'date' id = 'date' >< br >< br >
< button id = 'dagdag' halaga = 'Add' > Magdagdag ng Data sa Talahanayan pindutan >
div >
Sa snippet ng code sa itaas:
- Una, lumikha ng isang pamagat na ' Punan ang form sa ibaba: ”.
- Gumawa ng mga input field para sa “ Pangalan ”, “ Kasarian ”, “ Pagtatalaga ”, at “ JoiningDate 'na may mga nakatalagang id' pangalan ”, “ kasarian ”, “ pagtatalaga ”, at “ petsa ” ayon sa pagkakabanggit, upang kunin ang mga halaga ng input mula sa user.
- Ang mga id na ito ay ginagamit para sa pagkuha ng sanggunian ng mga elemento sa JavaScript.
- Pagkatapos, lumikha ng isang pindutan na may ' onclick ” ari-arian na tatawag sa “ addTableRow() ” function sa isang script file, upang idagdag at ipakita ang data sa isang talahanayan:
Dito, sa HTML file, isulat ang mga linyang ito ng code upang lumikha ng istraktura ng talahanayan, kung saan ang data ay dynamic na idaragdag:
< div >
< h4 > Rekord ng Empleyado b > h4 >
< gitna >
< table id = 'tableData' hangganan = '1' cellpadding = 'dalawa' >
< tr >
< td >< b > Pangalan b > td >
< td >< b > Kasarian b > td >
< td >< b > Pagtatalaga b > td >
< td >< b > Petsa ng Pagsali b > td >
tr >
mesa >
gitna >
div >
Sa code sa itaas:
- Gumawa ng table na may id na ' tableData ” na gagamitin sa script file para makuha ang reference ng table na ito at pagkatapos ay idagdag ang data dito.
- Ang talahanayan ay naglalaman ng apat na hanay, ' Pangalan ”, “ Kasarian ”, “ Pagtatalaga ”, at “ Petsa ng Pagsali ” na mag-iimbak ng data ayon sa mga pangalan ng column.
Ang pagpapatakbo ng HTML file ay magreresulta sa sumusunod na output ng browser:
Magdagdag tayo ng functionality para sa paggawa ng mga talahanayan nang pabago-bago gamit ang JavaScript. Sa script file o tag, gamitin ang code sa ibaba na dynamic na lilikha ng talahanayan:
function addTableRow ( ) {ay pangalan = dokumento. getElementById ( 'pangalan' ) ;
ay kasarian = dokumento. getElementById ( 'kasarian' ) ;
ay pagtatalaga = dokumento. getElementById ( 'pagtatalaga' ) ;
ay petsa = dokumento. getElementById ( 'date' ) ;
ay mesa = dokumento. getElementById ( 'tableData' ) ;
ay rowCount = mesa. mga hilera . haba ;
ay hilera = mesa. insertRow ( rowCount ) ;
hilera. insertCell ( 0 ) . innerHTML = pangalan. halaga ;
hilera. insertCell ( 1 ) . innerHTML = kasarian. halaga ;
hilera. insertCell ( dalawa ) . innerHTML = pagtatalaga. halaga ;
hilera. insertCell ( 3 ) . innerHTML = petsa. halaga ;
}
Sa snippet sa itaas:
- Una, tukuyin ang isang function ' addTableRow() ” na magti-trigger sa kaganapan ng pag-click ng HTML button.
- Pagkatapos, kunin ang reference ng lahat ng input field nang paisa-isa gamit ang kani-kanilang itinalagang id gamit ang “ getelementById() ” paraan at iimbak ang mga ito sa mga variable.
- Ang mga variable na ito ay gagamitin upang makuha ang halaga ng mga input field gamit ang HTML ' halaga ” property at itakda ang mga ito sa indibidwal na mga cell sa talahanayan gamit ang “ innerHTML ” ari-arian.
- Magdagdag ng mga hilera sa isang talahanayan gamit ang ' mesa.mga hanay.haba ” ari-arian at pagkatapos ay mag-imbak ng mga halaga sa loob nito.
Output
Ang output sa itaas ay nagpapahiwatig na ang dynamic na talahanayan ay matagumpay na nalikha sa pamamagitan ng pagdaragdag ng data sa isang form gamit ang JavaScript.
Konklusyon
Ang dynamic na talahanayan ay nilikha gamit ang iba't ibang mga katangian ng HTML na may mga paunang natukoy na pamamaraan ng JavaScript. Una, lumikha ng isang form sa isang HTML file at pagkatapos ay kunin ang sanggunian ng mga patlang gamit ang mga paunang natukoy na pamamaraan ng JavaScript tulad ng ' getElementById() ” na pamamaraan at pagkatapos ay kunin ang kanilang ipinasok na mga halaga gamit ang “ halaga ” ari-arian. Itakda ang mga halagang ito sa kani-kanilang mga column ng talahanayan gamit ang ' innerHTML ” ari-arian. Ang post sa blog na ito ay nagpapakita ng proseso para sa paglikha ng isang dynamic na talahanayan sa JavaScript.