Cómo contar el número de columnas en JQuery

Escrito por max power | Traducido por blas isaguirres
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo contar el número de columnas en JQuery
jQuery puede usarse para contar las columnas en una tabla HTML. (Comstock/Comstock/Getty Images)

El marco de JavaScript jQuery permite a un desarrollador web acceder a algunas de las funciones de JavaScript a través de sólo unos pocos comandos simples de jQuery. Específicamente, el método jQuery .find() puede ser usado para encontrar el número de elementos en una página Web. Por ejemplo, un desarrollador web puede optar por usar el método jQuery "find" para localizar el número de columnas en un elemento de tabla HTML.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Inserta el archivo de jQuery en tu página. Puedes descargar jQuery desde el sitio de jQuery o incrustar el archivo de la API de desarrollador de Google. Este código de ejemplo utiliza la API de Google:

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

  2. 2

    Asigna una identificación a tu elemento de tabla. jQuery utiliza la identidad de la tabla para determinar de qué tabla debe contar el número de columnas. Mira este ejemplo de la tabla HTML. La tabla contiene el identificador "grocery" y tiene tres columnas que contienen datos de artículos comestibles.

    <table name ='grocery' id ='grocery' border='5'> <tr> <th>UPC Number</th> <th>Name</th> <th>Price</th> </tr> <tr> <td>240494</td> <td>Apple</td> <td>.49</td> </tr> <tr> <td>240495</td> <td>Pear</td> <td>.29</td> </tr> <tr> <td>240496</td> <td>Peach</td> <td>.24</td> </tr> </table>

  3. 3

    Escribe el código de jQuery. El código jQuery debe escuchar un evento de activación, usa el método "find" para contar el número de elementos TR e informa esa cuenta. Este código jQuery logra este objetivo:

    <script language="JavaScript"> function showColumns(){ var numCols = $("#grocery").find('tr')[0].cells.length; alert('Total columns : '+numCols); } </script>

    </ Script>

  4. 4

    Crear un evento de activación. En este ejemplo, un botón tradicional de entrada HTML llama a la función jQuery:

    <form> <input type='button' value='Column count' onclick="javascript:showColumns();"> </form>

  5. 5

    Situado dentro de las etiquetas adecuadas, el código de ejemplo completo aparece como sigue:

    <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script language="JavaScript"> function showColumns(){ var numCols = $("#grocery").find('tr')[0].cells.length; alert('Total columns : '+numCols); } </script> </head> <body> <table name ='grocery' id ='grocery' border='5'> <tr> <th>UPC Number</th> <th>Name</th> <th>Price</th> </tr> <tr> <td>240494</td> <td>Apple</td> <td>.49</td> </tr> <tr> <td>240495</td> <td>Pear</td> <td>.29</td> </tr> <tr> <td>240496</td> <td>Peach</td> <td>.24</td> </tr> </table> <p><br/></p> <form> <input type='button' value='Column count' onclick="javascript:showColumns();"> </form> </body> </html>

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles