将.js制作的表格打印到html

Question

我刚接触javascript (我可以掌握语言的基础知识和功能，但在使用时缺乏“安慰”的感觉)，而且我已经设想了一个项目。该项目应该类似于一个成品，在这种情况下是餐厅老板的管理页面，当“老板”或管理员点击员工时，他/他将能够根据在javascript中创建的“假数据库”打印出这些表格。

我首先创建了一个包含数组(在本例中为EmployeeModule.js)的.js文件。然后，我继续创建另一个.js文件(名为employee.js)，该文件从EmployeeModule.js读取数据并将其排序到一个表中。

问题来了..。我不确定如何让employee.js将数据打印到HTML中。有人能帮我解决我的问题吗？

______________________________________
HTML
______________________________________
<!-- Employee table heading -->
<table style="width:100%" class="table" id="table-employees">

   <!-- Employee.js prints here -->
  
</table>

______________________________________
EmployeeModule.js
______________________________________

const EmployeeModule = ( function(){
    
    const employeeArray = [

        {
            name: "Jane Doe",
            address: "Example Alley 1",
            phoneNumber: "46983312",
            revenue: 15392,
            salary: 188,
            position: "Part-time"

        },
        {
            name: "John Doe",
            address: "The Big Street 5",
            phoneNumber: "92591093",
            revenue: 32574,
            salary: 192,
            position: "Full-time"
        },
        

    ];
    
    const getAll = () => employeeArray;

    return {getAll};

    
})

export default EmployeeModule;

______________________________________
employee.js
______________________________________

const printEmployees = () => {

    let htmlTxt = `
    <thead>
        <tr>
            <th>Name</th>
            <th>Revenue</th> 
            <th>Salary</th>
            <th>Position</th>
            <th>Address</th>
            <th>Phone Number</th>
        </tr>
    </thead>
    `;


    EmployeeModule.getAll().forEach(employee => {

        htmlTxt += `
        
            <tr>
                <td class="pt-5"> <img src="images/employee-images/${employee.img}" width="10%"> ${employee.name}</td>
                <td class="pt-5">${employee.revenue},-</td>
                <td class="pt-5">${employee.salary}</td>
                <td class="pt-5">${employee.position}</td>
                <td class="pt-5">${employee.address}</td>
                <td class="pt-5">${employee.phoneNumber}</td>
            </tr>
            
        `;

    })

    tableEmployees.innerHTML = htmlTxt;

}

printEmployee();

Answer 1

我在employee.js中观察到的一个问题是在函数定义cont printEmployees中，而您要调用的函数是printEmployee()。看起来只是一个Typo错误！

另外，EmployeeModule是函数，所以下面的语句应该是as EmployeeModule().getAll()，而不是EmployeeModule.getAll()，参见下面的例子：

  EmployeeModule()
    .getAll()
    .forEach((employee) => {
      htmlTxt += `
      
          <tr>
              <td class="pt-5"> <img src="images/employee-images/${employee.img}" width="10%"> ${employee.name}</td>
              <td class="pt-5">${employee.revenue},-</td>
              <td class="pt-5">${employee.salary}</td>
              <td class="pt-5">${employee.position}</td>
              <td class="pt-5">${employee.address}</td>
              <td class="pt-5">${employee.phoneNumber}</td>
          </tr>
          
      `;
    }); 

在HTML文件中：

<table style="width:100%" class="table" id="table-employees">

   <!-- Employee.js prints here -->
  
</table>
<script type="module" defer src="./employee.js"></script>

employee.js

import EmployeeModule from "./EmployeeModule.js";


const tableEmployees = document.querySelector("#table-employees");


const printEmployee = () => {
  let htmlTxt = `
  <thead>
      <tr>
          <th>Name</th>
          <th>Revenue</th> 
          <th>Salary</th>
          <th>Position</th>
          <th>Address</th>
          <th>Phone Number</th>
      </tr>
  </thead>
  `;

  EmployeeModule()
    .getAll()
    .forEach((employee) => {
      htmlTxt += `
      
          <tr>
              <td class="pt-5"> <img src="images/employee-images/${employee.img}" width="10%"> ${employee.name}</td>
              <td class="pt-5">${employee.revenue},-</td>
              <td class="pt-5">${employee.salary}</td>
              <td class="pt-5">${employee.position}</td>
              <td class="pt-5">${employee.address}</td>
              <td class="pt-5">${employee.phoneNumber}</td>
          </tr>
          
      `;
    });

  tableEmployees.innerHTML = htmlTxt;
};

printEmployee();

EmployeeModule.js

const EmployeeModule = ( function(){
    
    const employeeArray = [

        {
            name: "Jane Doe",
            address: "Example Alley 1",
            phoneNumber: "46983312",
            revenue: 15392,
            salary: 188,
            position: "Part-time"

        },
        {
            name: "John Doe",
            address: "The Big Street 5",
            phoneNumber: "92591093",
            revenue: 32574,
            salary: 192,
            position: "Full-time"
        },
        

    ];
    
    const getAll = () => employeeArray;

    return {getAll};

    
})

export default EmployeeModule;

Answer 2

1. 您应该在employee.js的顶部导入EmployeeModule.js，如下所示：

从"./EmployeeModule.js";导入EmployeeModule

HTTP

• 要让脚本加载到HTML中，应将以下行放到块中:当使用type="module"时，应启动为提供服务的HTTP服务器，否则将遇到CORS问题。

1. 它不能工作的原因应该是未定义的tableEmployees。要选择用其id tableEmployees表示元素的#tableEmployees，并对其进行定义：

const表=document.querySelector(“# tableEmployees -employees”)；

你也可以试试document.getElementById()，它的功能较弱，但速度更快。

Answer 3

javascript中几乎没有什么变化。应该能行得通。

      const EmployeeModule = function () {
        const employeeArray = [
          {
            name: 'Jane Doe',
            address: 'Example Alley 1',
            phoneNumber: '46983312',
            revenue: 15392,
            salary: 188,
            position: 'Part-time',
          },
          {
            name: 'John Doe',
            address: 'The Big Street 5',
            phoneNumber: '92591093',
            revenue: 32574,
            salary: 192,
            position: 'Full-time',
          },
        ];


        return employeeArray;
      };



      const printEmployees = () => {
        let htmlTxt = `
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Revenue</th> 
                    <th>Salary</th>
                    <th>Position</th>
                    <th>Address</th>
                    <th>Phone Number</th>
                </tr>
            </thead>
            `;
        EmployeeModule().forEach((employee) => {
          htmlTxt += `
            
                <tr>
                    <td class="pt-5"> <img src="images/employee-images/${employee.img}" width="10%"> ${employee.name}</td>
                    <td class="pt-5">${employee.revenue},-</td>
                    <td class="pt-5">${employee.salary}</td>
                    <td class="pt-5">${employee.position}</td>
                    <td class="pt-5">${employee.address}</td>
                    <td class="pt-5">${employee.phoneNumber}</td>
                </tr>
                
            `;
          });
          document
            .querySelector('#table-employees')
            .insertAdjacentHTML('beforeend', htmlTxt);
        };

        printEmployees();