53 - Accediendo a un conjunto de elementos HTML a través de un selector CSS (querySelectorAll)



Problema:Crear una página que contenga dos tablas html que muestren los sueldos promedio de tres empleados durante los años 2014 y 2015:
  <h1>Año 2014</h1>
  <table class="tablasueldos" id="a2014">
    <tr>
      <td>Empleado</td><td>Sueldo</td>
    </tr>
    <tr>
      <td>juan</td><td>1200</td>
    </tr>
    <tr>
      <td>ana</td><td>1900</td>
    </tr>
    <tr>
      <td>luis</td><td>1500</td>
    </tr>
  </table>

  <h1>Año 2015</h1>
  <table class="tablasueldos" id="a2015">
    <tr>
      <td>Empleado</td><td>Sueldo</td>
    </tr>
    <tr>
      <td>juan</td><td>1700</td>
    </tr>
    <tr>
      <td>ana</td><td>1900</td>
    </tr>
    <tr>
      <td>luis</td><td>1900</td>
    </tr>
  </table>

Desarrolar un programa que recupere mediante el método querySelectorAll los elementos "td" de una de las tablas y les cambie el color de fondo. Lo mismo hacer para la segunda tabla.

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script src="funciones.js"></script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
  <h1>Año 2014</h1>
  <table class="tablasueldos" id="a2014">
    <tr>
      <td>Empleado</td><td>Sueldo</td>
    </tr>
    <tr>
      <td>juan</td><td>1200</td>
    </tr>
    <tr>
      <td>ana</td><td>1900</td>
    </tr>
    <tr>
      <td>luis</td><td>1500</td>
    </tr>
  </table>

  <h1>Año 2015</h1>
  <table class="tablasueldos" id="a2015">
    <tr>
      <td>Empleado</td><td>Sueldo</td>
    </tr>
    <tr>
      <td>juan</td><td>1700</td>
    </tr>
    <tr>
      <td>ana</td><td>1900</td>
    </tr>
    <tr>
      <td>luis</td><td>1900</td>
    </tr>
  </table>

  <input type="button" value="Cambiar" id="boton1">
</body>
</html>
.tablasueldos {
  border-collapse: collapse;
}

.tablasueldos td{
   border: 1px dotted black;
   padding:4px;
}
window.addEventListener('load',inicializarEventos,false);

function inicializarEventos()
{
  var ob1=document.querySelector("#boton1");
  ob1.addEventListener('click',presion,false);
}

function presion(e)
{
  var ob1=document.querySelectorAll("#a2014 td");
  for(var x=0;x<ob1.length;x++)
    ob1[x].style.backgroundColor='#ff0';
  var ob2=document.querySelectorAll("#a2015 td");
  for(var x=0;x<ob2.length;x++)
    ob2[x].style.backgroundColor='#fc0';
}
Ver solución


Retornar