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

Question

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

在图像中你可以看到我已经获取了右侧纬度和经度的位置地址，但问题是它重复了三次并且再次创建了追加子项(我已经转换了纬度和经度加载页面时加载地址，因此地址是根据经纬度动态加载的)

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

我的代码:HTML:

       <div id="map"></div>
         <table class="table" id="zaz">
          <thead>
        <tr>
            <th>#</th>
            <th>Device</th>
            <th>Time</th>
            <th>Ignition</th>
            <th>Lat</th>
            <th>Long</th>
            <th>Address</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>ABC</td>
            <td>7/29/2018</td>
            <td>ON</td>
            <td>11.030676</td>
            <td>77.015775</td>

        </tr>
        <tr>
            <td>2</td>
            <td>DEF</td>
            <td>7/29/2018</td>
            <td>OFF</td>
            <td>11.009527</td>
            <td>77.016826</td>

        </tr>
        <tr>
            <td>3</td>
            <td>GHI</td>
            <td>7/29/2018</td>
            <td>ON</td>
            <td>10.997547</td>
            <td>76.933858</td>

        </tr>
    </tbody>

</table>

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

希望我已经解释了情况并等待任何想法和建议，顺便说一句，我尝试使用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);

                                }
                            });

因为我猜这部分是问题所在。等待任何回复，提前谢谢

Answer 1

如下所示替换您的 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);                                     
            }
        }
    });
}

您做错的地方是使用rows.forEach再次循环遍历所有行。您不需要这样做，因为您已经有了 table.find('tr').each(function (i) {.

的循环。