在JavaScript

我創建表中的javascript在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>

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。它不會創建下一行。這裏有什麼錯誤

來源

2014-03-25 Mohaideen

可能重複我的JavaScript代碼？]（http：//stackoverflow.c om/questions/988363/how-can-i-debug-my-javascript-code） – Liam

嘗試移動所有'td_ *'vars聲明裏面'for' –

雅會工作 – Mohaideen

請注意，您只創建了一組td元素。雖然您每次循環時都可能創建新的tr，但您永遠不會創建新的td元素。因此，您只有一組td s，在此情況下，這些元素將被放入最後一個tr，而將所有其他元素行完全空了。

在循環內移動td創建邏輯。

來源

2014-03-25 10:32:16

您可以在foreach的末尾再次追加同一個tr元素，使用tr = document.createElement（'tr'）覆蓋它。再次在你最後一次id.appendChild（tr）之前;

編輯：同時讓你的td創建在foreach中。

來源

2014-03-25 10:35:05 Brovoker

將所有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); 

     }

來源

2014-03-25 10:36:48 SajithNair

的HTML表格內：

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

來源

2014-03-25 10:49:50

<!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>

來源

2017-03-16 13:33:27

對不起，我會嘗試第一次所以通過錯誤我的問題在答案框中分享... –

我會嘗試執行添加行時單擊保存按鈕事件與驗證是驗證測試，但不正常工作，總行不能正常工作，請分享你的反饋相關話題.... ......... –

回答

相關問題