append()输出数据重复，不知道哪里出错了

[赤染]

求大佬指点
具体功能是判断后端传来的数据key值和表里的name值比较，如果相同则使用append()输出值，代码如下：
这是表格

<table class="contentable" id="datatable">
			<thead>
				<tr>
					<th width="7%" name="user">用户名</th>
					<th width="10%" name="phone">联系方式</th>
					<th width="10%" name="email">用户邮箱</th>
					<th width="20%" name="address">联系地址</th>
					<th width="5%" name="credit">信用</th>
					<th width="8%" name="manner">平台态度</th>
					<th width="5%" name="userclass">类别</th>
					<th width="8%" name="userimg">头像</th>
					<th width="15%" name="operate">操作</th>
				</tr>
			</thead>
		</table>

下面是js代码：

//					建立table下的tbody
			$("#datatable").append("<tbody></tbody>");
			$.ajax({
				type: "post",
				url: "../php/getuser.php",
				async: true,
				data: {},
				dataType: "json",
				success: function(data) {
					//					获取数据和条数
					console.log(data);
					console.log("data的长度" + data.length);
					//获取第一行的值,用来获取json字符串的key值
					var jsonfirst = data[0].valueOf();
					//			获取数据表每一行的内容
					var thobj = $("thead").children("tr").children("th");
					
//					打印data.length行数据，有重复问题
					$.each(data, function(index, obj) {
						$("#datatable tbody").append("<tr></tr>" );
//						获取后台所传数据keyname
							thobj.each(function(){
								var thobjname = $(this).attr('name');

								for(var key in jsonfirst) {
									var keyvalue = key;
									if(thobjname == keyvalue ){
										console.log(obj[thobjname]);
										$("#datatable tbody tr").append("<td>" + obj[thobjname] + "</td>");
										
									}else if(thobjname=="operate"){
										console.log("操作");
										$('#datatable tbody tr').append("<td><button class='functio editicon'>更改</button><button class='functio deleteicon'>删除</button></td>");
										return false;
									}else{
									}
								}
							});
					});

				},
				error: function() {
					error("获取数据错误");
				}
			});

输入的结果是这样的：



数据库里总共有三行数据，然后表格输出来的是第一行输出了三次，第二行输出了两次，第三行输出了一次，但是使用console.log()来看的数据输出并没有问题



谢谢

[讨厌走开啦]

在$.each里执行了$("#datatable tbody").append("<tr></tr>" );，这样在里面的for循环里$("#datatable tbody tr")第一次会拿到一个dom，第二次拿到两个，第三次拿到三个。

[天际的海浪]

$("#datatable tbody tr").append("<td>..........</td>");这样是为表格内已经添加的所有的tr内都添加一个td。这是不正确的。 应该只为最新创建的tr内添加一个td $.each(data, function(index, obj) { var tr = $("<tr></tr>").appendTo("#datatable tbody"); // 获取后台所传数据keyname thobj.each(function(){ var thobjname = $(this).attr('name'); for(var key in jsonfirst) { var keyvalue = key; if(thobjname == keyvalue ){ console.log(obj[thobjname]); tr.append("<td>" + obj[thobjname] + "</td>"); }else if(thobjname=="operate"){ console.log("操作"); tr.append("<td><button class='functio editicon'>更改</button><button class='functio deleteicon'>删除</button></td>"); return false; }else{ } } }); });

[赤染]

引用 2 楼 天际的海浪 的回复:

$("#datatable tbody tr").append("<td>..........</td>");这样是为表格内已经添加的所有的tr内都添加一个td。这是不正确的。
应该只为最新创建的tr内添加一个td


$.each(data, function(index, obj) {
var tr = $("<tr></tr>").appendTo("#datatable tbody");
// 获取后台所传数据keyname
thobj.each(function(){
var thobjname = $(this).attr('name');



for(var key in jsonfirst) {
var keyvalue = key;
if(thobjname == keyvalue ){
console.log(obj[thobjname]);
tr.append("<td>" + obj[thobjname] + "</td>");

}else if(thobjname=="operate"){
console.log("操作");
tr.append("<td><button class='functio editicon'>更改</button><button class='functio deleteicon'>删除</button></td>");
return false;
}else{
}
}
});
});

谢谢大神，好使了，太赞了

[赤染]

引用 1 楼 讨厌走开啦 的回复:

在$.each里执行了$("#datatable tbody").append("<tr></tr>" );，这样在里面的for循环里$("#datatable tbody tr")第一次会拿到一个dom，第二次拿到两个，第三次拿到三个。

谢谢