Hvordan telle antall kolonner i JQuery
jQuery Javascript rammeverk tillater en webutvikler å få tilgang til noen av Javascript-funksjoner gjennom bare noen få enkle jQuery kommandoer. Spesielt kan jQuery .Finn () metode brukes for å finne antall elementer på en webside. For eksempel kan en webutvikler velger å bruke jQuery find metode for å finne antall kolonner i en HTML-tabell element.
Bruksanvisning
1 Embed jQuery filen til siden din. Du kan laste jQuery fra jQuery nettstedet eller legge fil fra Google Developer API. Dette eksemplet koden bruker Google API:
<Script "> og har tre kolonner som inneholder dagligvarevaredata.
<Table name = 'dagligvarebutikk' id = 'dagligvarebutikk' border = '5'>
<Tr>
<Th> UPC nummer </ th>
<Th> navn </ th>
<Th> Pris </ th>
</ Tr>
<Tr>
<Td> 240 494 </ td>
<Td> Apple </ td>
<Td> 0,49 </ td>
</ Tr>
<Tr>
<Td> 240 495 </ td>
<Td> Pear </ td>
<Td> 0,29 </ td>
</ Tr>
<Tr>
<Td> 240 496 </ td>
<Td> Peach </ td>
<Td> 0,24 </ td>
</ Tr>
</ Table>
3 Skriv jQuery kode. JQuery koden skal lytte etter en utløsende hendelse, bruker find metoden for å telle antall TR elementer og rapportere at antall. Denne prøven jQuery kode oppnår dette målet:
<Script language = "Javascript">
funksjons showColumns () {
. Var numCols = $ ( "# dagligvare") finner ( 'st') [0] .cells.length;
alert ( 'Antall kolonner: "+ numCols);
}
</ Script>
4 Lag en utløsende hendelse. I dette eksempelet kaller en tradisjonell HTML innspill knappen jQuery funksjon:
<Form>
<Input type = "knappen" value = 'Antall kolonner' onclick = "javascript: showColumns ();">
</ Form>
5 Plasseres innenfor de riktige kodene, vises Hele prøven koden som følger:
<Html>
<Head>
<Script src = "& lt; / script"> http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js "> & lt; / script>
<Script language = "Javascript">
funksjons showColumns () {
. Var numCols = $ ( "# dagligvare") finner ( 'st') [0] .cells.length;
alert ( 'Antall kolonner: "+ numCols);
}
</ Script>
</ Head>
<Body>
<Table name = 'dagligvarebutikk' id = 'dagligvarebutikk' border = '5'>
<Tr>
<Th> UPC nummer </ th>
<Th> navn </ th>
<Th> Pris </ th>
</ Tr>
<Tr>
<Td> 240 494 </ td>
<Td> Apple </ td>
<Td> 0,49 </ td>
</ Tr>
<Tr>
<Td> 240 495 </ td>
<Td> Pear </ td>
<Td> 0,29 </ td>
</ Tr>
<Tr>
<Td> 240 496 </ td>
<Td> Peach </ td>
<Td> 0,24 </ td>
</ Tr>
</ Table>
<P> <br/> </ p>
<Form>
<Input type = "knappen" value = 'Antall kolonner' onclick = "javascript: showColumns ();">
</ Form>
</ Body>
</ Html>