Question

有一个名为employeeDetails的数组，在该数组中有3个对象。我想使用jQuery＆＃39; table方法将3个对象及其属性附加到each()。

我正在尝试，但它无法正常工作。我使用for循环完成了它并且已成功创建，但是当我使用each()时，我无法查看它。我想通过each()方法完成它。请帮助我，纠正我错在哪里。

＆＃13;

$(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);
    });
  });
});

＆＃13;

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

＆＃13;

Answer 1

employeeDetails.forEach(function(item){
   $('<tr>', {
     html: '<td>'+item.srNo'</td>'+....other fields
   }).appendTo(table);
});

你可以使用这样的结构，或者用于循环

Answer 2

.each()旨在迭代DOM元素，而不是数组。因此，使用for循环的解决方案肯定更好。

甚至更好的是@ Oleksiy的解决方案，因为令人惊讶的是.forEach()方法比传统的for循环使用更少的内存，所以如果你是优化怪物使用.forEach()但是毕竟，它无关紧要，因为你的阵列尺寸很小，所以你不会注意到任何速度差异。

Answer 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（）方法

3 个答案: