在jquery中創建表格行元素

我有一個來自服務器的響應。它是一個JSON對象。我將使用這行代碼創建表格行。在jquery中創建表格行元素

for(var i=0;i<Object.keys(obj.items).length;i++){ 
    str = str + "<tr><td>"+obj.items[i].C+"</td>"; 
    if(obj.items[i].S == "App"){ 
     str = str + "<td class='text-success'>"; 
    }else 
    if(obj.items[i].S == "Rej"){ 
     str = str + "<td class='text-danger'>"; 
    }else 
    if(obj.items[i].S == "Dr"){ 
     str = str + "<td class='text-warning'>"; 
    }else 
    if(obj.items[i].Status == "Pending"){ 
     str = str + "<td class='text-muted'>"; 
    } 
    str = str + obj.items[i].S+"</td><td>"+obj.items[i].D+"</td><td>"+obj.items[i].M+"</td>"; 
    if(obj.items[i].S == "App"){ 
     str = str + "<td><button type='button' class='btn btn-default' disabled>Cancel</button> <button type='button' class='btn btn-default'>Print</button></td></tr>"; 
    }else 
    if(obj.items[i].S == "Dr"){ 
     str = str + "<td><button type='button' class='btn btn-default'>Edit</button><button type='button' class='btn btn-default'>Delete</button></td></tr>"; 
    }else 
    if(obj.items[i].S == "Pending"){ 
     str = str + "<td><button type='button' class='btn btn default'>Cancel</button></td></tr>"; 
    } 
}

但它太長了。有沒有更好的方法來使用jQuery創建錶行？

以下是JSON對象的示例。

var obj = {"items":[{"C":"01","S":"Rej","D":"Jan 20","M":""}]}; 
    obj = {"items":[{"C":"02","S":"App","D":"Jan 21","M":"Jan 22"}]}; 
    obj = {"items":[{"C":"03","S":"Dr","D":"Jan 23","M":""}]}; 
    obj = {"items":[{"C":"04","S":"Pending","D":"Jan 24","M":""}]};

這裏是最終的HTML樣本，

<tr> 
    <td>01</td> 
    <td class="text-danger">Rej</td> 
    <td>Jan 20</td> 
    <td></td> 
    <td></td> 
</tr>

來源

2016-03-01 JMA

您能否向我們提供服務器返回的一些示例JSON對象？此外，有關可以解析哪些信息的更多信息。 –

請包含一個json響應示例和最終的html，您需要 – xzegga

好！另外，'C'，'S'，'D'和'M'是什麼意思？ –

創建這等於條件，你的if else語句和值等於爲HTML你要追加密鑰的tdLayoutMap：

var obj = {"items":[{"C":"01","S":"Rej","D":"Jan 20","M":""}]}; 
 
    obj2 = {"items":[{"C":"02","S":"App","D":"Jan 21","M":"Jan 22"}]}; 
 
    obj3 = {"items":[{"C":"03","S":"Dr","D":"Jan 23","M":""}]}; 
 
    obj4 = {"items":[{"C":"04","S":"Pending","D":"Jan 24","M":""}]}; 
 

 
tdLayoutMap = { 
 
    'App': ["<td class='text-success'>", "<td><button type='button' class='btn btn-default' disabled>Cancel</button> <button type='button' class='btn btn-default'>Print</button></td></tr>"], 
 
    'Rej': ["<td class='text-danger'>"], 
 
    'Dr.': ["<td class='text-danger'>", "<td><button type='button' class='btn btn-default'>Edit</button><button type='button' class='btn btn-default'>Delete</button></td></tr>"], 
 
    'Pending': ["<td class='text-muted'>", "<td><button type='button' class='btn btn default'>Cancel</button></td></tr>"], 
 
} 
 
for(var i=0, str='';i<Object.keys(obj.items).length;i++){ 
 
    str = str + "<tr><td>"+obj.items[i].C+"</td>"; 
 
    str = str + tdLayoutMap[obj.items[i].S][0]; 
 
    str = str + obj.items[i].S+"</td><td>"+obj.items[i].D+"</td><td>"+obj.items[i].M+"</td>"; 
 
    str = str + tdLayoutMap[obj.items[i].S][1]; 
 
    alert(str); 
 
}

或者，您可以使用JS DOM Methods或JQuery DOM Methods與DOM進行交互。

來源

2016-03-01 05:29:38

你可以使用JS和jQuery DOM方法添加示例嗎？ – JMA

和什麼是更快的加載？你的答案或使用JS和jQuery DOM方法？ – JMA

@JohnArellano我認爲最快的將是我的答案，因爲它正在形成直接注入html的字符串。祝你有美好的一天:) –

這是否幫助：

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 

<div id="showData"></div> 

<script type="text/javascript"> 
var obj = [ 
      {"C":"01","S":"Rej","D":"Jan 20","M":""}, 
      {"C":"02","S":"App","D":"Jan 21","M":"Jan 22"}, 
      {"C":"03","S":"Dr","D":"Jan 23","M":""}, 
      {"C":"04","S":"Pending","D":"Jan 24","M":""} 
     ]; 

var str = ''; 
$(obj).each(function(){ 
    str += "<tr><td>"+this.C+"</td>"; 
    if(this.S == "App"){ 
     str += "<td class='text-success'>"; 
    }else 
    if(this.S == "Rej"){ 
     str += "<td class='text-danger'>"; 
    }else 
    if(this.S == "Dr"){ 
     str += "<td class='text-warning'>"; 
    }else 
    if(this.Status == "Pending"){ 
     str += "<td class='text-muted'>"; 
    } 
    str += this.S+"</td><td>"+this.D+"</td><td>"+this.M+"</td>"; 
    if(this.S == "App"){ 
     str += "<td><button type='button' class='btn btn-default' disabled>Cancel</button> <button type='button' class='btn btn-default'>Print</button></td></tr>"; 
    }else 
    if(this.S == "Dr"){ 
     str += "<td><button type='button' class='btn btn-default'>Edit</button><button type='button' class='btn btn-default'>Delete</button></td></tr>"; 
    }else 
    if(this.S == "Pending"){ 
     str += "<td><button type='button' class='btn btn default'>Cancel</button></td></tr>"; 
    } 
}) 

$('#showData').html(str); 
</script>

您obj是容易處理的對象的數組。你可以使用變量「this」來表示循環中的每個對象。

此外，你是覆蓋你的obj變量爲每個單獨的對象。我猜你想添加每個對象，而不是每次覆蓋？

來源

2016-03-01 05:30:17

在jquery中創建表格行元素

回答

相關問題