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同样的其他tds。它不会创建下一行。这里的错误是什么

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

        }

Answer 2

请注意，您只创建了一组td元素。虽然您每次循环时可能会创建一个新的tr，但您永远不会创建新的td元素。因此，您只有一组td s，其中包含case被放在最后tr中，所有其他行都完全为空。

将td创建逻辑移动到循环内。

Answer 3

在foreach的末尾再次附加相同的tr元素，使用tr = document.createElement（＆＃39; tr＆＃39;）覆盖它;再次在你的最后一个id.appendChild（tr）之前;

编辑：也可以在foreach中创建你的td。

Answer 4

html for table：

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

         </tbody>
       </table>

js：

var html = '';
var tableDevice = document.getElementById('deviceTable');
 for (var i = 0; i < json_obj.devices.length; i++) {

    html += '<tr>';
    html += '<td>'+ json_obj.devices[i].name +'</td>';
    html += '<td>'+ json_obj.devices[i].imei +'</td>';
    html += '<td>'+ json_obj.devices[i].email +'</td>';
    html += '<td>'+ json_obj.devices[i].latitude +'</td>';
    html += '<td><a href="#" id="detail-"'+ i +'>View More Detail</a></td>';
    html += '</tr>';

 }

 tableDevice.innerHTML = html;

Answer 5

<!DOCTYPE html>
<html>
<head>
    <title>Table Dynamic Add Or Remove Element</title>
        <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
        <style type="text/css">
        body
        {
            font-family: 'Raleway', sans-serif;
        }
        .wrap
        {
            width:100%;
        }
        input
        {
            margin: 10px;
            outline: none;
            margin-bottom: 10px;
            font-family: 'Raleway', sans-serif;
            border-radius: 2px;
    }
    .textInfo
    {
        margin-bottom: 10px;
        padding: 10px 100px 10px 5px;
        border-radius: 2px;
    }
    #btn{
        padding: 10px 35px;
        outline: none;
        font-family: 'Raleway', sans-serif;
        border:2px solid transparent;
        background: #8BC34A;
        border-radius: 2px;
        color: rgb(255, 255, 255);
        font-weight: normal;
        font-size: 15px;
    }
    #btn:hover{
        background: #fff;
        color:black;
        font-weight: normal;
        font-size: 15px;
        border:2px solid black;
    }
    table td input
    {
        border:none;
        text-align: center;
        border-radius: 2px;
    }
    .container
    {
        width: 80%;
        margin: 0px auto;
    }
    table
    {
        width: 100%;
    }
    table th
    {
        background: #000;
        color:white;
        padding: 5px;
        font-weight: normal;

    }
    #center
    {
        text-align: center;
    }
    table,td,th
    {
        border-collapse: collapse;
        border: 1px solid black;
    }
    #btn1{
        background: rgba(160, 154, 152, 0.58);
        font-family: 'Raleway', sans-serif;
    }
    h1
    {
        font-weight: normal;
        text-align: center;
        color: #8BC34A;
    }
    .messageError
    {
        padding-left: 20px;
        font-size: 11px;
        color:red;
    }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="container">
            <h1>Employee Registration</h1>
            <input class="textInfo" type="text" name="ename" id="name" placeholder="Enter Name" id="name" onblur="validate(this,'Required Field')">
            <span class="messageError"></span>
        </div>
    <div class="container">
        <input class="textInfo"  type="text" name="eadd" id="add" placeholder="Enter Address" id="add" onblur="validate(this,'Required Field')">
            <span class="messageError"></span>
    </div>

    <div class="container">
        <input class="textInfo"  type="text" name="esalary" id="sal" placeholder="Enter Salary" id="sal" onblur="validate(this,'Required Field')"><span class="messageError"></span>
    </div>
    <div class="container">
        <input id="btn" type="submit" name="addBtn" value="Save" onclick="addMoreRows()">

        <table id="tbl_id" style="text-align:center" align="center" valign="top">
        <thead>
                <tr>
                    <th>E_Id</th>
                    <th>Name</th>
                    <th>Address</th>
                    <th>Salary</th>
                    <th>Total</th>
                    <th>Delete</th>
                </tr>
        </thead>
        <tbody>
        </tbody>
</table>    
    </div>
</div>

<script type="text/javascript">
    var calculate=0;
    var count=1;
    var name1=document.getElementById("name");
    var add1=document.getElementById("add");
    var total=document.getElementById("total");
    var sal1=document.getElementById("sal");
    valid=true;

    function validate(el,msg,f){
        field=el;
        v=field.value;
        //var msgError=document.getElementsByClassName("msgError");
        var err=field.parentNode.getElementsByClassName('messageError')[0];
            if(v=="")
            {
                err.innerHTML=msg;
                err.style.display="block";
                valid=false;
            }
            else
            {
                err.style.display="none";
            }
    }       

                inp2.value = sal.value;

                var inp2 = new_row.cells[4].getElementsByTagName('input')[0];
                inp2.id += len;

                inp2.value = calculate+parseInt(sal.value);
                console.log(inp2.value);

                table.appendChild( new_row );




            calculate=calculate+parseInt(sal.value);
            console.log(calculate);
    */
     function addMoreRows(text)
     {
        if(!validate(name1,'Required Field ',true))
        {
            valid=false;
        }
        if(!validate(add1,'Required Field',true))
        {
            valid=false;
        }
        if(!validate(sal1,'Required Field',true))
        {
            valid=false;
        }
        var table = document.getElementById('tbl_id');
        var row = table.insertRow();//create Table Row In 
        var id=row.insertCell(0);
        var name = row.insertCell(1);
        var add = row.insertCell(2);
        var salary = row.insertCell(3);
        var total = row.insertCell(4);
        var del=row.insertCell(5);   

        id.innerHTML=count;
        count=parseInt(count)+1;
        name.innerHTML = name1.value;
        add.innerHTML = add1.value;
        salary.innerHTML = sal1.value;
        total.innerHTML = calculate+parseInt(sal1.value);
        del.innerHTML="<input type='submit' name='btn' id='btn1' value='Delete Record' onclick='deleteRow(this)'>";//button For Perform Delete Operation
         var salary1=parseInt(salary.innerHTML);
         calculate=parseInt(calculate+salary1);
   }
    function deleteRow(row)
    {
            var i=row.parentNode.parentNode.rowIndex;
            console.log(i);
            count=count-1;
            document.getElementById('tbl_id').deleteRow(i);
    }
</script>
</body>
</html>

在javascript中创建一个表

5 个答案: