Nwlapcug.com


Come contare il numero di colonne in JQuery

Come contare il numero di colonne in JQuery


Il framework JavaScript jQuery consente a uno sviluppatore Web accedere ad alcune delle caratteristiche di JavaScript attraverso solo pochi comandi di semplice jQuery. In particolare, il metodo di .find() jQuery può essere utilizzato per trovare il numero di elementi in una pagina Web. Ad esempio, un Web developer può scegliere di utilizzare jQuery trovare il metodo per individuare il numero di colonne in un elemento HTML table.

Istruzioni

1

Incorporare il file jQuery nella tua pagina. Si può scaricare jQuery dal sito jQuery o incorporare il file da API gli sviluppatori di Google. Questo codice di esempio utilizza l'API di Google:

< script "> e ha tre colonne che contengono i dati dell'elemento alimentari.

< nome tabella = 'alimentari' id = 'alimentari' border = '5' >

< tr >

< th > UPC numero < /th >

Nome < th > < /th >

Prezzo < th > < /th >

< /tr >

< tr >

< td > 240494 < /td >

Apple < td > < /td >

< td >. 49 < /td >

< /tr >

< tr >

< td > 240495 < /td >

Pera < td > < /td >

< td > < /td >,29

< /tr >

< tr >

< td > < /td > 240496

Peach < td > < /td >

< td >. 24 < /td >

< /tr >

< / tabella >

3

Scrivere il codice jQuery. Il codice jQuery dovrebbe attendere un evento scatenante, utilizzare il metodo find per contare il numero di elementi TR e segnalare che contano. Questo esempio di codice jQuery compie questo obiettivo:

< script language = "JavaScript" >

Function showColumns() () {

var numCols =.cells.length $("#grocery").find('tr') [0];

Alert (' totale colonne: ' + numCols);

}

< / script >

4

Creare un evento scatenante. In questo esempio, un pulsante di input HTML tradizionale chiama la funzione jQuery:

< forma >

< input type = valore 'pulsante' = 'Numero di colonne' onclick="javascript:showColumns();" >

< / form >

5

Collocato all'interno dei tag corretto, il codice di esempio completo viene visualizzato come segue:

< html >

< head >

< script src = "& lt; / script" > http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js "> & lt; / script >

< script language = "JavaScript" >

Function showColumns() () {

var numCols =.cells.length $("#grocery").find('tr') [0];

Alert (' totale colonne: ' + numCols);

}

< / script >

< / head >

< corpo >

< nome tabella = 'alimentari' id = 'alimentari' border = '5' >

< tr >

< th > UPC numero < /th >

Nome < th > < /th >

Prezzo < th > < /th >

< /tr >

< tr >

< td > 240494 < /td >

Apple < td > < /td >

< td >. 49 < /td >

< /tr >

< tr >

< td > 240495 < /td >

Pera < td > < /td >

< td > < /td >,29

< /tr >

< tr >

< td > < /td > 240496

Peach < td > < /td >

< td >. 24 < /td >

< /tr >

< / tabella >

< p >< br / >< / p >

< forma >

< input type = valore 'pulsante' = 'Numero di colonne' onclick="javascript:showColumns();" >

< / form >

< / body >

< / html >