Question

我收到服务器的回复。它是一个JSON对象。我将使用这行代码创建表行。

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>

Answer 1

创建一个tdLayoutMap，其密钥等于if else语句中的条件，值等于你要追加的html：

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进行互动。

Answer 2

这有用吗：

<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变量。我猜你是想添加每个对象，而不是每次都覆盖？

在jquery中创建表行元素

2 个答案: