Javascript 使用appendchild在已加载的表数据中用文本动态填充列

我不确定标题是否完全符合我的要求抱歉给您带来不便，所以我需要做的就是用一些文本填充特定列，并且我有一些获取数据的方法，唯一的问题是它以错误的方式显示

在图中，您可以看到我在右侧获取了纬度和经度的位置地址，但问题是它重复了三次，并且再次创建了append-child（我在加载页面时已将纬度和经度转换为地址，因此地址是基于纬度和经度动态加载的）

我期望的结果是在地址列中，在ABC行中我需要“Vilankurichi”，在DEF中我需要“81，G.V”，在第三行“2-5 Chokkampudur”，并删除这些重复项

我的代码： HTML:

#
装置
时间
点火
拉特
长的
地址
1.
基础知识
7/29/2018
在…上
11.030676
77.015775
2.
DEF
7/29/2018
关
11.009527
77.016826
3.
GHI
7/29/2018
在…上
10.997547
76.933858

Javascript:

             var lat = '0';
    var long = '0';
    var forloopcount = 0;
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
    });
    var geocoder = new google.maps.Geocoder;
    var infowindow = new google.maps.InfoWindow;
    $(document).ready(function () {
        debugger;
        var rowCount = document.getElementById('zaz').rows.length;
        forloopcount = (rowCount - 1);
        var table = $("table tbody");
        table.find('tr').each(function (i) {
            var $tds = $(this).find('td'),
                lat = $tds.eq(4).text(),
                long = $tds.eq(5).text()
            geocodeLatLng(geocoder, map, infowindow);
            debugger;
            function geocodeLatLng(geocoder, map, infowindow) {
                var zazzzzz = lat + "," + long;
                var input = zazzzzz;
                alert(input);
                var latlngStr = input.split(',', 2);
                var latlng = { lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1]) };
                geocoder.geocode({ 'location': latlng }, function (results, status) {
                    if (status === 'OK') {
                        if (results[0]) {
                            var zazgkl = results[0].formatted_address;
                            debugger;
                            var tbody = document.getElementById('zaz').querySelectorAll('tbody tr'),
                           rows = Array.prototype.slice.call(tbody);
                            rows.forEach(function (row) {
                                var td = document.createElement('td');
                                td.textContent = zazgkl;
                                for (i = 0; i < forloopcount; i++) {
                                    row.appendChild(td);

                                }
                            });
                        } else {
                        }
                    } else {
                    }
                });
            }
        });
    });
  }

var-lat='0'；
var long='0'；
var-forloopcount=0；
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
});
var geocoder=new google.maps.geocoder；
var infowindow=new google.maps.infowindow；
$（文档）.ready（函数（）{
调试器；
var rowCount=document.getElementById（'zaz'）.rows.length；
forloopcount=（行计数-1）；
var表=$（“表tbody”）；
表.find（'tr'）。每个函数（i）{
var$tds=$（this.find（'td'），
lat=$tds.eq（4）.text（），
long=$tds.eq（5）.text（）
geocodeLatLng（地理编码器、地图、信息窗口）；
调试器；
功能geocodeLatLng（地理编码器、地图、信息窗口）{
var Zazzz=lat+“，”+long；
var输入=Zazzz；
警报（输入）；
var latlngStr=input.split（'，'，2）；
var-latlng={lat:parseFloat（latlngStr[0]），lng:parseFloat（latlngStr[1]）；
geocoder.geocode（{'location'：latlng}，函数（结果，状态）{
如果（状态=='OK'）{
如果（结果[0]）{
var zazgkl=results[0]。格式化的_地址；
调试器；
var tbody=document.getElementById（'zaz'）.queryselectoral（'tbody tr'），
rows=Array.prototype.slice.call（tbody）；
rows.forEach（函数（行）{
var td=document.createElement（'td'）；
td.textContent=zazgkl；
for（i=0；i

希望我已经解释了这种情况，并等待任何想法和建议，通过我尝试使用break、return false和在追加一次后终止for循环的方式，但在这部分中没有任何用处

                   rows.forEach(function (row) {
                                var td = document.createElement('td');
                                td.textContent = zazgkl;
                                for (i = 0; i < forloopcount; i++) {
                                    row.appendChild(td);

                                }
                            });

rows.forEach（函数（行）{
var td=document.createElement（'td'）；
td.textContent=zazgkl；
for（i=0；i

我想这部分就是问题所在。

---

等待任何响应，请提前感谢

更换您的

geocodeLatLng

功能，如下所示

geocodeLatLng(geocoder, map, infowindow, $(this)); 

function geocodeLatLng(geocoder, map, infowindow, tr) {
    var zazzzzz = lat + "," + long;
    var input = zazzzzz;
    alert(input);
    var latlngStr = input.split(',', 2);
    var latlng = { lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1]) };
    geocoder.geocode({ 'location': latlng }, function (results, status) {
        if (status === 'OK') {
            if (results[0]) {
                var zazgkl = results[0].formatted_address;
                debugger;
                var td = document.createElement('td');
                td.textContent = zazgkl;                    
                tr.appendChild(td);                                     
            }
        }
    });
}

---

您所做的错误是使用

行再次循环所有行。forEach

。您不需要这样做，因为您已经使用

表进行了循环。find（'tr'）。每个（函数（i）{

感谢您的努力，通过尝试您的代码，我得到的控制台错误为（未捕获类型错误：$（…）。appendChild不是函数）@gokul更新了我的答案。在geocodeLatLng函数中添加了新参数，并在调用Ankyou的最后一个参数时传递了$（此参数）。兄弟，问题已得到解决。您的代码只做了一个更改，我已将appendchild（）替换为append（）

geocodeLatLng(geocoder, map, infowindow, $(this)); 

function geocodeLatLng(geocoder, map, infowindow, tr) {
    var zazzzzz = lat + "," + long;
    var input = zazzzzz;
    alert(input);
    var latlngStr = input.split(',', 2);
    var latlng = { lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1]) };
    geocoder.geocode({ 'location': latlng }, function (results, status) {
        if (status === 'OK') {
            if (results[0]) {
                var zazgkl = results[0].formatted_address;
                debugger;
                var td = document.createElement('td');
                td.textContent = zazgkl;                    
                tr.appendChild(td);                                     
            }
        }
    });
}