如何使用 jquery each() 方法在数组中追加多个对象
Posted
技术标签:
【中文标题】如何使用 jquery each() 方法在数组中追加多个对象【英文标题】：How to append multiple objects in array with jquery each() method 【发布时间】：2018-01-04 05:22:25 【问题描述】：有一个名为employeeDetails 的数组，在该数组中有3 个对象。我想使用 jQuery 的 each() 方法将 3 个对象及其属性附加到我的 table 中。
我正在尝试，但它不起作用。我使用for 循环完成了它，它已成功创建，但是当我使用each() 时，我无法查看它。我希望通过each() 方法完成。请帮助我并纠正我的错误。
$(document).ready(function()
var employeeDetails = [
srNo: 1,
doj: '20 April 2011',
dob: '11 June 1987',
name: 'Aniket Paste',
designation: 'Web Designer',
salary: 30000,
address: 'Borivali East'
,
srNo: 2,
doj: '10 April 2011',
dob: '15 May 1987',
name: 'Amey Sawant',
designation: 'UI Developerr',
salary: 50000,
address: 'Borivali East'
,
srNo: 3,
doj: '21 June 2014',
dob: '11 December 1989',
name: 'Mahesh Parab',
designation: 'FrontEnd Developer',
salary: 45000,
address: 'Dahisar East'
]
$(".btn").click(function()
// for(i = 0; i < employeeDetails.length; i++)
// var data = "<tr><td>" + employeeDetails[i].srNo +
// "</td><td>" + employeeDetails[i].doj +
// "</td><td>" + employeeDetails[i].dob +
// "</td><td>" + employeeDetails[i].name +
// "</td><td>" + employeeDetails[i].designation +
// "</td><td>" + employeeDetails[i].salary +
// "</td><td>" + employeeDetails[i].address +
// "</td></tr>";
// $('table').append(data);
//
$('table').each(function()
$('table').append(employeeDetails);
);
);
);<link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<button class="btn btn-default mb15 mt15">Add Data</button>
<table class="table table-bordered">
<tr>
<th>Sr.No.</th>
<th>D.o.j</th>
<th>D.o.b</th>
<th>Employee Name</th>
<th>Designation</th>
<th>Salary</th>
<th>Address</th>
</tr>
<!--
<tr>
<td>01</td>
<td>24.04.2012</td>
<td>20.04.1988</td>
<td>Aniket Paste</td>
<td>Web Designer</td>
<td>30000</td>
<td>Borivali East</td>
</tr>
-->
</table>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>【问题讨论】：
您最初使用的for 循环是正确的方法。在桌子上使用each() 是处理逻辑的错误方法。
Rory McCrossan，谢谢您的回答。但是我想要一种如何通过 each() 方法来做到这一点的方法，或者使用 each() 是不可能的？
这是可能的，但相当多余。虽然$.each() 可用于迭代数组，但其逻辑与您已有的for 循环相同。您要做的就是在不需要的地方添加 jQuery。
【参考方案1】：
employeeDetails.forEach(function(item)
$('<tr>',
html: '<td>'+item.srNo'</td>'+....other fields
).appendTo(table);
);
你可以使用这样的构造，或者 for 循环
【讨论】：
很好 - 这正是我的解决方案所做的 - 唯一的事情 - 我在函数中构建字符串并仅在 forEach 循环完成时将其传递到表中 - 这样它只附加一次这种方式多次改变 DOM。对于小表来说不是什么大问题 - 但是如果在每次迭代中修改 DOM，那么具有多列和多行的大表可能会产生渲染问题。除此之外 - 伟大的思想和所有...... :)【参考方案2】：.each() 旨在遍历 DOM 元素，而不是数组。所以你的for循环解决方案肯定更好。
更好的是@Oleksiy 的解决方案，因为令人惊讶的是.forEach() 方法比经典的for 循环使用更少的内存，所以如果你是优化狂，请使用.forEach()，但毕竟没关系，因为你的数组大小很小，因此您不会注意到任何速度差异。
【讨论】：
【参考方案3】：您可以创建表格行的字符串版本（使用 forEach 循环遍历数组），然后将其传递到表格的 html 中（这样做允许遍历数组而无需附加每个将行单独添加到 DOM。对于小表来说不是什么大问题 - 但如果在每次迭代中修改 DOM，则具有多列和多行的大表可能会产生渲染问题。
我还建议取消按钮并简单地将表格建立在 document.ready() 上，但这取决于您。
$(document).ready(function()
var employeeDetails = [
srNo:1,
doj:'20 April 2011',
dob:'11 June 1987',
name:'Aniket Paste',
designation:'Web Designer',
salary:30000,
address:'Borivali East'
,
srNo:2,
doj:'10 April 2011',
dob:'15 May 1987',
name:'Amey Sawant',
designation:'UI Developerr',
salary:50000,
address:'Borivali East'
,
srNo:3,
doj:'21 June 2014',
dob:'11 December 1989',
name:'Mahesh Parab',
designation:'FrontEnd Developer',
salary:45000,
address:'Dahisar East'
]
$(".btn").click(function()
var str = '';
employeeDetails.forEach(function(employee)
str+= '<tr>';
str+= '<td>' + employee.srNo + '</td>';
str+= '<td>' + employee.doj + '</td>'; str+= '<td>' + employee.dob + '</td>';
str+= '<td>' + employee.name + '</td>';
str+= '<td>' + employee.designation + '</td>'; str+= '<td>' + employee.salary + '</td>';
str+= '<td>' + employee.address + '</td>';
str+= '</tr>';
)
$('#employeeTable').append(str);
);
);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>each</title>
<link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="css/main.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
<style>
</style>
</head>
<body style="width:800px; margin: 0 auto;">
<button class="btn btn-default mb15 mt15">Add Data</button>
<table class="table table-bordered" id="employeeTable">
<tr>
<th>Sr.No.</th>
<th>D.o.j</th>
<th>D.o.b</th>
<th>Employee Name</th>
<th>Designation</th>
<th>Salary</th>
<th>Address</th>
</tr>
</table>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>【讨论】：
以上是关于如何使用 jquery each() 方法在数组中追加多个对象的主要内容，如果未能解决你的问题，请参考以下文章