Righe di colore alternate – Non funziona per entrambe le barre laterali

Ho 2 barre laterali. Una barra laterale fornisce risultati ordinati da una query mysql e l’altra barra laterale fornisce indicazioni da e verso una posizione. Sto provando ad alternare i colors delle righe dei risultati mysql e i colors delle righe delle direzioni. Sta funzionando per le direzioni usando questo codice ma non per i risultati di mysql. Qualcuno sa come posso farlo funzionare? Grazie

tr:nth-child(even) {background: #CCC} tr:nth-child(odd) {background: #FFF}     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}     
var locations = [ connect_error) { die("Connection failed: " . $conn->connect_error); } $sql = "SELECT id, name, address, lat, lng, Icon FROM markers"; $result = $conn->query($sql); if ($result->num_rows > 0) { // output data of each row while($row = $result->fetch_assoc()) { echo '["' . $row["name"]. '"'. ', '. '"' . $row["address"].'"'.', '. '"'. $row["lat"].','. $row["lng"].'"'.', '. '"'. $row["Icon"]. '"]'. ','; } } else { echo "0 results"; } $conn->close(); ?> ]; // 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
"; for (i = 0; i < 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] + "
" + locations[i][1] + "

Get Directions" }); 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 + "
"; for (var i = 0; i < 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) + "
"; 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 < 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 < 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 < numberOfResults) && (i < closest.length)); i++) { closest[i].setMap(map); outputDiv.innerHTML += "" + results[i].title + '
' + results[i].address + "
" + results[i].distance.text + ' approximately ' + results[i].duration.text + "
Get Directions

" } } }); } 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);

Le voci side_bar non sono una tabella, quindi il CSS aggiunto per gli elementi

non si applica. Probabilmente la cosa più semplice da fare è renderli un tavolo.

 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 < 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'); var sidebarHtml = ''; var results = response.rows[0].elements; // save title and address in record for sorting for (var i = 0; i < 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 < numberOfResults) && (i < closest.length)); i++) { closest[i].setMap(map); sidebarHtml += "" } sidebarHtml += '
" + results[i].title + '
' + results[i].address + "
" + results[i].distance.text + ' approximately ' + results[i].duration.text + "
Get Directions
'; outputDiv.innerHTML = sidebarHtml; } }); }

prova del concetto di violino

snippet di codice:

 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
"; for (i = 0; i < 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] + "
" + locations[i][1] + "

Get Directions" }); 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 + "
"; for (var i = 0; i < 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) + "
"; 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 < 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'); var sidebarHtml = ''; var results = response.rows[0].elements; // save title and address in record for sorting for (var i = 0; i < 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 < numberOfResults) && (i < closest.length)); i++) { closest[i].setMap(map); sidebarHtml += "" } sidebarHtml += '
" + results[i].title + '
' + results[i].address + "
" + results[i].distance.text + ' approximately ' + results[i].duration.text + "
Get Directions
'; outputDiv.innerHTML = sidebarHtml; } }); } 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); var locations = [ ["John Doe", "145 Rock Ridge Road, Chester, NY ", "41.314926,-74.270134", "http://sofit.miximages.com/javascript/blue.png"], ["Jim Smith", "12 Williams Rd, Montvale, NJ ", "41.041599,-74.019554", "http://sofit.miximages.com/javascript/green.png"], ["John Jones", "689 Fern St Township of Washington, NJ ", "40.997704,-74.050598", "http://sofit.miximages.com/javascript/yellow.png"], ];
  html, body, #map { margin: 0; padding: 0; height: 600px; width: 400px; } .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: 400px; } #panel { z-index: -100; display: block; position: absolute; top: 135px; left: 400px; } #mdiv { z-index: 500; width: 25px; height: 25px; display: none; background-color: red; border: 1px solid black; position: absolute; left: 660px; 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 }