追加新行表的複製<tr>

Question

我試圖讓谷歌地圖的位置lat和長值到一個表在這個DEMO，但我不知道爲什麼jQuery是複製錶行？

這裏是代碼我使用：

var map; 
$(document).ready(function() { 
    var latlng = new google.maps.LatLng(49.241943, -122.889318); 
    var myOptions = { 
     zoom: 12, 
     center: latlng, 
     disableDefaultUI: true, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var cnt = 0; 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    google.maps.event.addListener(map, 'click', function (event) { 
     marker = new google.maps.Marker({ 
      position: event.latLng, 
      map: map, 
      draggable: true, 
      title: "Camp Num: " + ++cnt 
     }); 
      $('#myTable tbody').append('<tr class="child"><td>'+ marker.title +'</td><td>'+ marker.position.lat()+'</td><td>'+ marker.position.lng()+'</td></tr>'); 
    }); 

}); 

能否請您讓我知道爲什麼發生這種情況？

Answer 1

Tbody表示元素的主體，瀏覽器在表格中插入tbody元素。如果您使用鉻檢查器工具或螢火蟲查看元素，則可以在表格中看到兩個tbody。因此，你看到兩行被附加在兩個tbody中。你可以寫這樣的東西：

$('#myTable tbody:eq(1)').append('<tr class="child"><td>'+ marker.title +'</td><td>'+ marker.position.lat()+'</td><td>'+ marker.position.lng()+'</td></tr>');