Resurse: Eclipse Mars pentru dezvoltatorii PHP
Prin acest meniu vom crea un fișier pentru HTML, CSS etc.
1) Creați fișierul.js
2) creați fișierul.html. Puteți să o creați dintr-un șablon sau să îl puteți scrie singur.
// aici indicăm faptul că folosim HTML 5. Înregistrarea este scurtă, spre deosebire de versiunile anterioare
// etichete HTML standard pentru crearea unei pagini
Totul, fișier html a fost creat, acum continuați să creați un fișier de script Java.
Deci, în prima linie puteți vedea numele familiar al funcției.
În a doua linie, creați eticheta tabelului utilizând expresia document.createElement (element).
Pentru a face distincția tabelului, îi atribuie un atribut curb.
În viitor, va trebui să mă refer la acest tabel, așadar am setat atributul tag la un id unic. Deci, puteți adăuga un alt atribut folosind metoda setAttribute (nume, valoare).
Apoi am atârnat ascultătorul pe etichetă. Dar pentru moment, să sărim acest moment și să ne întoarcem puțin mai târziu.
Acum începe buclele. Acolo vom desena o masă, sau mai degrabă rândurile și coloanele ei. Creăm șirul folosind metoda insertRow (i). iar coloanele sunt inserateCell (j).
Vă atrag atenția. Voi specifica atributele de care aveam nevoie. Acesta este un alt mod de a specifica atributul tag. În acest caz, aici va fi eticheta
Și aici, de asemenea, am nevoie să specificăm id-ul. Și aici este această intrare:
arată că variabila celulară ca matrice cu cheia id va avea o valoare (folosind metoda de lipire am adăugat valori numerice la șirul de text).
Ultima linie după ciclu spune că vom introduce elementul nou creat în interiorul etichetei corporale în document (document) și vom afișa metoda appendChild (element).
Și acum înapoi la ascultător
Scop. Vreau să fac clic pe celulă și să-i aflu id-ul.
În metoda addEventListener, precizez evenimentul pe care vreau să îl prind, în acest caz este "clic". Apoi vin cu numele funcției, unde va exista un cod care va face ceva, dacă evenimentul a venit. Și în cele din urmă am subliniat că tipul de prindere de care am nevoie este simplu, fără clopote și fluiere, atât de fals. Deci, cum ați înțeles sau nu ați înțeles, dar ideea este că acum creăm o altă funcție numită onClickCell.
funcția alertă onClickCell (eveniment) (event.target.id);
>
Deoarece această funcție este un eveniment, specific că valoarea de intrare este eveniment. Ca un test că am obținut rezultatul a ceea ce am vrut, folosesc caseta de dialog de alertă și îmi arată id-ul celulei selectate.
Figura 3 - Exemplu de capturare a unui eveniment din celula selectată.
BONUS!
Funcția de verificare la crearea unei tabele.
funcția checkCell ()<
// Consultați id-ul specificat al tabelului și luați elementele celulare
var idTab = document.getElementById ("tab");
// Count numărul de celule
var numCells = lungime idTab;
// Ieșiți-i în ordine.
pentru (var td = 0; td <= numCells; td++)
alertă (td);
>
În viitor, acest cod poate fi util pentru lucrul cu celule.
Articole similare
Trimiteți-le prietenilor: