首页定义函数并调用，并在单击超链接文本"查看入职离职情况“后打印出加图1所示的表格。

定义函数并调用，并在单击超链接文本"查看入职离职情况“后打印出加图1所示的表格。

时间: 2024-10-13 20:19:15 浏览: 55

要在JavaScript中创建一个函数并实现点击超链接显示入职离职情况的表格，首先你需要准备一个HTML结构，包含一个表格和一个超链接。假设你的表格数据存储在一个数组或对象中。 ```html <!DOCTYPE html> <html lang="en"> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; border-bottom: 1px solid #ddd; } </style> </head> <body> <h2>点击这里查看入职离职情况</h2> <a href="#" onclick="showTableData()">查看入职离职情况</a> <br><br> <table id="employeeTable" style="display:none;">  </table> <script> function showTableData() { var tableData = [ // 这里替换为实际的入职离职数据 {name: '张三', status: '入职', date: '2022-01-01'}, {name: '李四', status: '离职', date: '2022-06-30'}, // 更多数据... ]; var table = document.getElementById('employeeTable'); table.style.display = "table"; // 渲染表格 table.innerHTML = ''; for (var i = 0; i < tableData.length; i++) { var row = table.insertRow(i); var nameCell = row.insertCell(0); var statusCell = row.insertCell(1); var dateCell = row.insertCell(2); nameCell.innerHTML = tableData[i].name; statusCell.innerHTML = tableData[i].status; dateCell.innerHTML = tableData[i].date; } } </script> </body> </html> ``` 在这个例子中，我们定义了一个名为`showTableData`的函数，当用户点击"查看入职离职情况"的链接时，这个函数会被调用，它会显示预先定义好的表格数据。如果需要从服务器获取数据，你可以替换为AJAX请求或更改数据源。

阅读全文