5 - Selección de elementos utilizando los selectores CSS.


Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
</head>

<body>
  <table border="1" id="tabla1">
    <tr>
      <td>1111111111</td>
      <td>1111111111</td>
      <td>1111111111</td>
      <td>1111111111</td>
    </tr>
    <tr>
      <td>2222222222</td>
      <td>2222222222</td>
      <td>2222222222</td>
      <td>2222222222</td>
    </tr>
    <tr>
      <td>3333333333</td>
      <td>3333333333</td>
      <td>3333333333</td>
      <td>3333333333</td>
    </tr>
  </table>
  <br>
  <table border="1" id="tabla2">
    <tr>
      <td>1111111111</td>
      <td>1111111111</td>
      <td>1111111111</td>
      <td>1111111111</td>
    </tr>
    <tr>
      <td>2222222222</td>
      <td>2222222222</td>
      <td>2222222222</td>
      <td>2222222222</td>
    </tr>
    <tr>
      <td>3333333333</td>
      <td>3333333333</td>
      <td>3333333333</td>
      <td>3333333333</td>
    </tr>
  </table>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="funciones.js"></script>
</body>

</html>
let x = $(document);
x.ready(inicializarEventos);

function inicializarEventos() {
  let x = $("#tabla1 tr");
  x.click(cambiarColor);
}

function cambiarColor() {
  let x = $(this);
  x.css("background-color", "#ffff00");
}

Confeccionar una página que muestre dos tablas con tres filas cada una. Cambiar el color de fondo de cada fila de la primer tabla cuando sea presionada con el mouse.


Ver solución

pagina1.html





funciones.js



Retornar