title: Alternating Color Rows - Not working for both sidebars
body: <p>I have 2 sidebars. One sidebar gives sorted results from a mysql query and the other sidebar gives directions to and from a location. I am trying to alternate the row colors of the mysql results and the row colors of the directions. It's working for the directions using this code but not for the mysql results.  Anyone know how I can get this working?  Thanks</p>
  
  <pre><code>tr:nth-child(even) {background: #CCC}
  tr:nth-child(odd) {background: #FFF}
  
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
      &lt;style&gt;
          html,
  body,
  #map_canvas {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  table,
  tr,
  td {
    height: 100%;
    }
  .text {
    width: 300px;
    height: 600px;
    background-color: white;
    overflow:scroll;
    overflow-y: auto;
    overflow-x: hidden;
  
  }
  
  #side_bar {
    z-index: 100;
    position: absolute;
    top: 135px;
    left: 1050px;
    }
  #panel {
    z-index: -100;
    display: block;
    position: absolute;
    top: 135px;
    left: 1050px;
    }
  #mdiv {
    z-index: 500;
    width: 25px;
    height: 25px;
    display: none;
    background-color: red;
    border: 1px solid black;
    position: absolute;
    left: 1300px;
    top: 112px;
  }
  .mdiv {
    height: 25px;
    width: 2px;
    margin-left: 12px;
    background-color: black;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    /* IE 9 */
    -webkit-transform: rotate(45deg);
    /* Safari and Chrome */
    z-index: 1;
  }
  .md {
    height: 25px;
    width: 2px;
    background-color: black;
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    /* IE 9 */
    -webkit-transform: rotate(90deg);
    /* Safari and Chrome */
    z-index: 2;
  }
  
  tr:nth-child(even) {background: #CCC}
  tr:nth-child(odd) {background: #FFF}
  
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;link rel="stylesheet" type="text/css" href="assets/css/storelocator.css" /&gt;
  
  &lt;body&gt;
  
  &lt;div class="bh-sl-container"&gt;
      &lt;div id="page-header"&gt;
          &lt;h1 class="bh-sl-title"&gt;The Auditor Locator&lt;/h1&gt;
  
      &lt;/div&gt;
  
      &lt;div class="bh-sl-form-container"&gt;
          &lt;form id="bh-sl-user-location" method="post" action="#"&gt;
              &lt;div class="form-input"&gt;
                  &lt;label for="bh-sl-address"&gt;Enter Address or Zip Code:&lt;/label&gt;                         
               &lt;input id= "address" type="text" value="Palo Alto, CA"&gt;&lt;/input&gt;
                           &lt;input type= "button" value="Submit" onclick="codeAddress();"&gt;&lt;/input&gt;
  
              &lt;/div&gt;
  
  
          &lt;/form&gt;
      &lt;/div&gt;
  
  
  
  
  &lt;script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table border="0"&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;div id="map" style="height: 600px; width:1000px;"&gt;&lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;div id="side_bar" class='text'&gt;&lt;/div&gt;
        &lt;div id="panel" class='text'&gt;&lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  
  &lt;div id="info"&gt;&lt;/div&gt;
  &lt;div id="mdiv"&gt;
    &lt;div class="mdiv"&gt;
      &lt;div class="md"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
      &lt;script type="text/javascript"&gt;
          var locations = [
  &lt;?php
  $servername = "";
  $username = "";
  $password = "";
  $dbname = "";
  
  // Create connection
  $conn = new mysqli($servername, $username, $password, $dbname);
  // Check connection
  if ($conn-&gt;connect_error) {
      die("Connection failed: " . $conn-&gt;connect_error);
  } 
  
  $sql = "SELECT id, name, address, lat, lng, Icon FROM markers";
  $result = $conn-&gt;query($sql);
  
  if ($result-&gt;num_rows &gt; 0) {
      // output data of each row
      while($row = $result-&gt;fetch_assoc()) {
      echo '["'  . $row["name"]. '"'.    ', '. '"' . $row["address"].'"'.', '. '"'. $row["lat"].','. $row["lng"].'"'.', '. '"'. $row["Icon"]. '"]'. ',';
          }
  } else {
      echo "0 results";
  }
  
  $conn-&gt;close();
  ?&gt; 
  
  ];
  // alert(locations.length);
  
  var geocoder = null;
  var map = null;
  var customerMarker = null;
  var gmarkers = [];
  var closest = [];
  var directionsDisplay = new google.maps.DirectionsRenderer();;
  var directionsService = new google.maps.DirectionsService();
  var map;
  
  function initialize() {
    // alert("init");
    geocoder = new google.maps.Geocoder();
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 9,
      center: new google.maps.LatLng(52.6699927, -0.7274620),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var infowindow = new google.maps.InfoWindow();
    var marker, i;
    var bounds = new google.maps.LatLngBounds();
    document.getElementById('info').innerHTML = "found " + locations.length + " locations&lt;br&gt;";
    for (i = 0; i &lt; locations.length; i++) {
      var coordStr = locations[i][2];
      var coords = coordStr.split(",");
      var pt = new google.maps.LatLng(parseFloat(coords[0]), parseFloat(coords[1]));
      bounds.extend(pt);
      marker = new google.maps.Marker({
        position: pt,
        map: map,
        icon: locations[i][3],
        address: locations[i][1],
        title: locations[i][0],
        html: locations[i][0] + "&lt;br&gt;" + locations[i][1] + "&lt;br&gt;&lt;br&gt;&lt;a href='javascript:getDirections(customerMarker.getPosition(),&amp;quot;" + locations[i][1] + "&amp;quot;);'&gt;Get Directions&lt;/a&gt;"
      });
      gmarkers.push(marker);
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            infowindow.setContent(marker.html);
            infowindow.open(map, marker);
          }
        })
        (marker, i));
    }
    map.fitBounds(bounds);
  
    $("#mdiv").click(function() {
      $("#side_bar").css({
        "z-index": 100,
        "top": "135px"
      });
      $("#panel").css("z-index", -100);
      $("#mdiv").css("display", "none");
    })
  
  }
  
  function codeAddress() {
    var address = document.getElementById('address').value;
    geocoder.geocode({
      'address': address
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        if (customerMarker) customerMarker.setMap(null);
        customerMarker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
        });
        closest = findClosestN(results[0].geometry.location, 12);
        // get driving distance
        closest = closest.splice(0, 12);
        calculateDistances(results[0].geometry.location, closest, 12);
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }
  
  function findClosestN(pt, numberOfResults) {
    var closest = [];
    document.getElementById('info').innerHTML += "processing " + gmarkers.length + "&lt;br&gt;";
    for (var i = 0; i &lt; gmarkers.length; i++) {
      gmarkers[i].distance = google.maps.geometry.spherical.computeDistanceBetween(pt, gmarkers[i].getPosition());
      document.getElementById('info').innerHTML += "process " + i + ":" + gmarkers[i].getPosition().toUrlValue(6) + ":" + gmarkers[i].distance.toFixed(2) + "&lt;br&gt;";
      gmarkers[i].setMap(null);
      closest.push(gmarkers[i]);
      closest.sort(sortByDist);
    }
  
    return closest;
  }
  
  function sortByDist(a, b) {
    return (a.distance - b.distance)
  
  }
  
  function calculateDistances(pt, closest, numberOfResults) {
    var service = new google.maps.DistanceMatrixService();
    var request = {
      origins: [pt],
      destinations: [],
      travelMode: google.maps.TravelMode.DRIVING,
      unitSystem: google.maps.UnitSystem.IMPERIAL,
      avoidHighways: false,
      avoidTolls: false
    };
    for (var i = 0; i &lt; closest.length; i++) {
      request.destinations.push(closest[i].getPosition());
    }
    service.getDistanceMatrix(request, function(response, status) {
      if (status != google.maps.DistanceMatrixStatus.OK) {
        alert('Error was: ' + status);
      } else {
        var origins = response.originAddresses;
        var destinations = response.destinationAddresses;
        var outputDiv = document.getElementById('side_bar');
        outputDiv.innerHTML = '';
  
        var results = response.rows[0].elements;
        // save title and address in record for sorting
        for (var i = 0; i &lt; closest.length; i++) {
          results[i].title = closest[i].title;
          results[i].address = closest[i].address;
          results[i].idx_closestMark = i;
        }
        results.sort(sortByDistDM);
        for (var i = 0;
          ((i &lt; numberOfResults) &amp;&amp; (i &lt; closest.length)); i++) {
          closest[i].setMap(map);
  
          outputDiv.innerHTML += "&lt;a href='javascript:google.maps.event.trigger(closest[" + results[i].idx_closestMark + "],\"click\");'&gt;" + results[i].title + '&lt;/a&gt;&lt;br&gt;' + results[i].address + "&lt;br&gt;" + results[i].distance.text + ' approximately ' + results[i].duration.text + "&lt;br&gt;&lt;a href='javascript:getDirections(customerMarker.getPosition(),&amp;quot;" + results[i].address + "&amp;quot;);'&gt;Get Directions&lt;/a&gt;&lt;br&gt;&lt;hr&gt;"
  
        }
      }
    });
  }
  
  function getDirections(origin, destination) {
    var request = {
      origin: origin,
      destination: destination,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setMap(map);
        directionsDisplay.setDirections(response);
        $("#side_bar").css({
          "z-index": -100,
          "top": "135px"
        });
        $("#panel").css("z-index", 100);
        $("#mdiv").css("display", "block");
  
        directionsDisplay.setPanel(document.getElementById('panel'));
  
  
      }
    });
  }
  
  function sortByDistDM(a, b) {
    return (a.distance.value - b.distance.value)
  }
  
  google.maps.event.addDomListener(window, 'load', initialize);
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>