使用jquary和javascript动态添加tr
使用js添加
首先拿到json解析过的json对象，比如，var obj = eval(data);因为data可能存放的是对象， 这里就假设是对象。根据对象里面的属性，添加几个td。
for (var index in obj) {
var mode=obj[index];//取出数组中的对象
//创建一个row
//tb是我获取的HTML的一个tbody
var row=tb.insertRow(index);
var cell=row.insertCell(0);
cell.innerHTML=mode.pid;
cell=row.insertCell(1);
cell.innerHTML=mode.pname;
cell=row.insertCell(2);
cell.innerHTML=mode.ptype;
cell=row.insertCell(3);
cell.innerHTML=mode.price;
var img = document.createElement("img");
img.setAttribute("src",mode.picon);
img.setAttribute("height","50px");
img.setAttribute("width","70px");
cell=row.insertCell(4).appendChild(img);
cell=row.insertCell(5);
cell.innerHTML=mode.lastTime;
cell = row.insertCell(6);
cell.innerHTML=mode.unit;
//创建a和span
var delButton = document.createElement("a");
var delSpan = document.createElement("span");
delSpan.setAttribute("class","icon-trash-o");
delSpan.setAttribute("onclick","delect("+mode.pid+")");
delSpan.innerHTML = "删除";
delButton.setAttribute("class","button border-red");
delButton.style.cursor="pointer";
var modButton = document.createElement("a");
modButton.setAttribute("onclick","modProduct("+mode.pid+")");
modButton.style.cursor="pointer";
var modSpan = document.createElement("span");
modSpan.innerHTML = "修改";
modSpan.setAttribute("class","icon-edit");
modButton.setAttribute("class","button border-main");
cell = row.insertCell(7).appendChild(delButton).appendChild(delSpan);
cell = row.insertCell(8).appendChild(modButton).appendChild(modSpan);
}总结
获取到的tbody.insertRow(行数)，就是创建一个tr。创建的tr.insertCell(列数)就是创建的列。 当然，下面也可以创建img，button。setAttribute就是创建属性，.style就是加上样式。
使用jq动态创建
for (var index in data) {
var mode=data[index];//取出数组中的对象
var tr=$(".tbody").append("<tr></tr>");
tr.append("<td>"+mode.id+"</td>");
tr.append("<td>"+mode.name+"</td>");
tr.append("<td>"+mode.sex+"</td>");
tr.append("<td>"+mode.age+"</td>");
tr.append("<td>"+mode.depart+"</td>");
tr.append("<td>"+mode.phone+"</td>");
tr.append("<td>"+mode.email+"</td>");
tr.append("<td><img src='"+mode.icon+"' style='height:60px;width:70px;'></td>");
tr.append("<td><button class='button border-red' style='cursor: pointer' onclick='delect("+mode.id+")'><span class='icon-trash-o'>删除</span></button></td>");
tr.append("<td><button class='button border-main' style='cursor: pointer'onclick='modPerson("+mode.id+")' ><span class='icon-edit'>修改</span></button></td>");
}总结
jq的底层也是js，jq是人家分装好的框架，所以jq是js的升级版。使用ajax请求的数据类型可以直接装换成json对象，我们这里直接拿出来用。通过jq之间获取到tbody，使用append()方法，后面直接可以写标签名，标签上直接使用样式和属性。下面配上图片。
在这里插入图片描述
这里js和jq效果是一样的。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018年11月13日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录