在jquery中创建表行元素

我收到了服务器的响应。它是一个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>";
    }
}

这是最终的html示例

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

01
雷吉
1月20日

创建一个

tdLayoutMap

，其中的键等于if-else语句中的条件，值等于要附加的html：

var obj={“items”：[{“C”：“01”，“S”：“Rej”，“D”：“Jan 20”，“M”：“}]}；
obj2={“项目”：[{“C”：“02”，“S”：“App”，“D”：“Jan 21”，“M”：“Jan 22”}]}；
obj3={“项目”：[{“C”：“03”，“S”：“Dr”，“D”：“Jan 23”，“M”：“}]}；
obj4={“项目”：[{“C”：“04”，“S”：“待定”，“D”：“1月24日”，“M”：“}]}；
tdLayoutMap={
“应用程序”：[“”，“取消打印”]，
“Rej”：[“”]，
“Dr.：[”，“EditDelete”]，
“挂起”：[“”，“取消”]，
}
对于（var i=0，str=''；i创建一个
tdLayoutMap
，其中的键等于if-else语句中的条件，值等于要附加的html：


var obj={“items”：[{“C”：“01”，“S”：“Rej”，“D”：“Jan 20”，“M”：“}]}；
obj2={“项目”：[{“C”：“02”，“S”：“App”，“D”：“Jan 21”，“M”：“Jan 22”}]}；
obj3={“项目”：[{“C”：“03”，“S”：“Dr”，“D”：“Jan 23”，“M”：“}]}；
obj4={“项目”：[{“C”：“04”，“S”：“待定”，“D”：“1月24日”，“M”：“}]}；
tdLayoutMap={
“应用程序”：[“”，“取消打印”]，
“Rej”：[“”]，
“Dr.：[”，“EditDelete”]，
“挂起”：[“”，“取消”]，
}
对于（var i=0，str=''；i这是否有帮助：

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


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”：“待定”，“D”：“1月24日”，“M”：“}
];
var-str=''；
$（对象）。每个（函数（）{
str+=“”+this.C+“”；
如果（this.S==“应用程序”）{
str+=”；
}否则
if（this.S==“Rej”）{
str+=”；
}否则
如果（this.S==“Dr”）{
str+=”；
}否则
如果（this.Status==“待定”）{
str+=”；
}
str+=this.S+“”+this.D+“”+this.M+“”；
如果（this.S==“应用程序”）{
str+=“取消打印”；
}否则
如果（this.S==“Dr”）{
str+=“编辑删除”；
}否则
如果（this.S==“待定”）{
str+=“取消”；
}
})
$（'#showData'）.html（str）；

obj作为对象数组更容易处理，并且可以使用变量“this”来表示循环中的每个对象

另外，您正在为每个单独的对象覆盖obj变量。我想您的意思是添加每个对象，而不是每次都覆盖？
这是否有帮助：

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


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”：“待定”，“D”：“1月24日”，“M”：“}
];
var-str=''；
$（对象）。每个（函数（）{
str+=“”+this.C+“”；
如果（this.S==“应用程序”）{
str+=”；
}否则
if（this.S==“Rej”）{
str+=”；
}否则
如果（this.S==“Dr”）{
str+=”；
}否则
如果（this.Status==“待定”）{
str+=”；
}
str+=this.S+“”+this.D+“”+this.M+“”；
如果（this.S==“应用程序”）{
str+=“取消打印”；
}否则
如果（this.S==“Dr”）{
str+=“编辑删除”；
}否则
如果（this.S==“待定”）{
str+=“取消”；
}
})
$（'#showData'）.html（str）；

obj作为对象数组更容易处理，并且可以使用变量“this”来表示循环中的每个对象

另外，您正在为每个对象覆盖obj变量。我想您的意思是添加每个对象，而不是每次都覆盖？
您能提供服务器返回的几个JSON对象示例吗？另外，关于可以解析哪种信息的更多信息。请提供一个JSON响应示例和最终的html，您可以antGood！还有，什么是
C
、
S
、
D
和
M
的意思？代码、状态、日期、修改可以在几行中完成？5-10行？你能提供服务器返回的几个JSON对象示例吗？另外，关于可以解析哪种信息的更多信息。请包括JSON响应您想要的示例和最终html！还有，
C
、
S
、
D
和
M
的意思是什么？代码、状态、日期、修改可以在几行内完成？5-10行？您可以使用JS和jQuery DOM方法添加示例吗？加载速度更快的是什么？您的答案还是使用JS和jQuery DOM方法？@JohnArellano我认为最快的答案应该是我的答案，因为它正在形成字符串，直接注入html。祝您愉快：）但是为什么这不是一个好的实践呢？你能给出使用JS和jquery DOM方法的示例以及你回答的逻辑吗？@JohnArellano你是对的，这不是推荐的方法，所以我更新了我的答案，实际上字符串连接是获得最佳性能的好方法。你能使用JS和jquery DOM方法添加示例吗？fas是什么加载中有什么问题？你的答案还是使用JS和jQuery DOM方法？@JohnArellano我认为最快的答案应该是我的答案，因为它正在形成字符串，并直接注入html。祝你愉快：）但是为什么这不是一个好的做法呢？你能给出使用JS和jquery DOM方法的示例以及你回答的逻辑吗？@JohnArellano你是对的，这不是推荐的方法，所以我更新了我的答案，实际上字符串连接是获得最佳性能的好方法。