Question

我正在尝试创建一个包含2列的表格，标题用于“姓名和薪资”，然后我试图循环一个带有名称的数组和另一个用于薪水的数组，但是顺序不对，它们仅填充第一列（名称）

<table border="1">
        <thead>
        <tr>
                <th>Name</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <script>
                var employeeName = ["Tom", "John", "Jack", "Sam", "Sarah", "Rachel", "Rick", "Sean", "Joe"];
                for(var i = 0 ; i < employeeName.length ; i++)
                {
                    document.write("<tr>");
                    document.write("<td>" + employeeName[i] + "</td>");

                }
                var employeeSalary = ["1000", "1500", "2000", "5000", "2500", "3000", "3500", "2500", "1750"];
                for(var e = 0 ; e < employeeSalary.length ; e++)
                {

                    document.write("<td>" + employeeSalary[e] + "</td>");
                    document.write("</tr>");
                }


            </script>
        </tbody>
</table>

Answer 1

主要问题是，您将姓名和薪水存储在不同的数组中。最好既将值存储在一个对象中，又将这些对象存储在一个列表中。但是根据您给定的结构，您必须按以下步骤解决它：

<table border="1">
        <thead>
        <tr>
                <th>Name</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <script>
                var employeeName = ["Tom", "John", "Jack", "Sam", "Sarah", "Rachel", "Rick", "Sean", "Joe"];
                var employeeSalary = ["1000", "1500", "2000", "5000", "2500", "3000", "3500", "2500", "1750"];

                for(var i = 0 ; i < employeeName.length ; i++)
                {
                    document.write("<tr>");
                    document.write("<td>" + employeeName[i] + "</td><td>" + employeeSalary[i] + "</td>");
                    document.write("</tr>");
                }


            </script>
        </tbody>
</table>

编辑

这是下面评论中对您的询问的答复。如果您想用一系列对象解决问题，我建议这样做：

<table border="1">
    <thead>
        <tr>
            <th>
                Name
            </th>
            <th>
                Salary
            </th>
        </tr>
    </thead>
    <tbody>
        <script>
            const employees = [
                  {name:"Tom", salary:"1000"}, 
                  {name:"John", salary:"1500"}, 
                  {name:"Jack", salary:"2000"}, 
                  {name:"Sam", salary:"5000"}, 
                  {name:"Sarah", salary:"2500"}, 
                  {name:"Rachel", salary:"3000"}, 
                  {name:"Rick", salary:"3500"}, 
                  {name:"Sean", salary:"2500"}, 
                  {name:"Joe", salary:"1750"}
                  ];

            employees.forEach( element => {
                document.write("<tr>");
                document.write("<td>" + element.name + "</td><td>" + element.salary + "</td>");
                document.write("</tr>");
            });
        </script>
    </tbody>
</table>

Answer 2

如果您想将name和salary放在列中，则只需迭代1个循环即可。在此循环内，创建新的tr，并在此name的新salary中设置值td和tr。

<table border="1">
        <thead>
        <tr>
                <th>Name</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <script>
              var employeeSalary = ["1000", "1500", "2000", "5000", "2500", "3000", "3500", "2500", "1750"];
                var employeeName = ["Tom", "John", "Jack", "Sam", "Sarah", "Rachel", "Rick", "Sean", "Joe"];
                for(var i = 0 ; i < employeeName.length ; i++)
                {
                    document.write("<tr>");
                    document.write("<td>" + employeeName[i] + "</td>"); 
                    document.write("<td>" + employeeSalary[i] + "</td>");
                    document.write("</tr>");
                }
              
               


            </script>
        </tbody>
</table>

Answer 3

我只需要map整个员工范围，然后为每个员工创建一个tr。接下来，我将该行附加到tbody元素上。

这样做可以避免出现两个循环。

var employeeName = ["Tom", "John", "Jack", "Sam", "Sarah", "Rachel", "Rick", "Sean", "Joe"];
var employeeSalary = ["1000", "1500", "2000", "5000", "2500", "3000", "3500", "2500", "1750"];

let employeeInfo = employeeName.map((name, key) => `<tr><td>${name}</td><td>${employeeSalary[key]}</td></tr>`)

document.querySelector('table tbody').innerHTML = employeeInfo.join('')

<table border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Answer 4

如果您试图将它们按列排列，则名称和薪水都应在如下所示的同一循环中

var employeeName = ["Tom", "John", "Jack", "Sam", "Sarah", "Rachel", "Rick", "Sean", "Joe"]; 

var employeeSalary = ["1000", "1500", "2000", "5000", "2500", "3000", "3500", "2500", "1750"]; 

for(var i = 0 ; i < employeeName.length ; i++) 
{ document.write("<tr>");
 document.write("<td>" + employeeName[i] + "</td>"); 
document.write("<td>" + employeeSalary[i] + "</td>");
document.write("</tr>"); 
}

Answer 5

let employees = [{name: "Tom", salary: 1000}...]
let table = ["<table>"];
for(let employee of employees) { 
    table.push("<tr>"); 
    table.push("<td>" + employee.name + "</td>"); 
    table.push("<td>" + employee.salary+ "</td>");
    table.push("</tr>"); 
}
table.push("</table>");
document.write(table.join());

javascript数组循环到表

5 个答案: