使用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效果是一样的。