javascript - 在 JavaScript 中创建一个表

Question

我正在用 javascript 创建表格

HTML

<table class="table table-hover">
                    <tbody  id="deviceTable">
                       <tr>
                            <th>User Name</th>
                            <th>IMEI Number</th>
                            <th>Email</th>
                            <th>GPS Location</th>
                            <th>Action</th>
                        </tr>

                       </tbody>
                    </table>

JS

var td_name = document.createElement('td');
        var td_imei = document.createElement('td');
        var td_email = document.createElement('td');
        var td_location = document.createElement('td');
        var td_action = document.createElement('td');
        var id= document.getElementById("deviceTable");

        for(var i=0; i<json_obj.devices.length;i++)
        {
            var tr = document.createElement('tr');
            id.appendChild(tr);
            var name = document.createTextNode(json_obj.devices[i].name);
            var imei = document.createTextNode(json_obj.devices[i].imei);
            var email = document.createTextNode(json_obj.devices[i].email);
            var location = document.createTextNode(json_obj.devices[i].latitude);
            td_action.innerHTML = '<a href="" id="detail'+i+'">View More Detail</a>';
            td_name.appendChild(name);
            tr.appendChild(td_name);
            td_imei.appendChild(imei);
            tr.appendChild(td_imei);
            td_email.appendChild(email);
            tr.appendChild(td_email);
            td_location.appendChild(location);
            tr.appendChild(td_location);
            tr.appendChild(td_action);
            id.appendChild(tr);

        }

这里的表格和数据是正确的。但错误是所有姓名数据都在同一个 td 中，就像其他 td 一样。它不会创建下一行。这里有什么错误

Answer 1

将所有 td 声明移至循环内部

var id= document.getElementById("deviceTable");

        for(var i=0; i<json_obj.devices.length;i++)
        {
            var tr = document.createElement('tr');
            var td_name = document.createElement('td');
            var td_imei = document.createElement('td');
            var td_email = document.createElement('td');
            var td_location = document.createElement('td');
            var td_action = document.createElement('td');
            id.appendChild(tr);
            var name = document.createTextNode(json_obj.devices[i].name);
            var imei = document.createTextNode(json_obj.devices[i].imei);
            var email = document.createTextNode(json_obj.devices[i].email);
            var location = document.createTextNode(json_obj.devices[i].latitude);
            td_action.innerHTML = '<a href="" id="detail'+i+'">View More Detail</a>';
            td_name.appendChild(name);
            tr.appendChild(td_name);
            td_imei.appendChild(imei);
            tr.appendChild(td_imei);
            td_email.appendChild(email);
            tr.appendChild(td_email);
            td_location.appendChild(location);
            tr.appendChild(td_location);
            tr.appendChild(td_action);
            id.appendChild(tr);

        }