用visual studio code写一个js文件,需求:访问127.0.0.1:9000/index时,返回一个四行三列的表格,要求表格隔行换色
时间: 2024-09-25 07:11:47 浏览: 29
在Visual Studio Code(VSCode)中编写JavaScript文件以满足这个需求,你需要使用HTML、CSS以及一些基本的JavaScript来创建动态的表格。这里是一个简单的示例,将HTML结构嵌入到一个`index.html`文件中,并结合CSS实现隔行换色:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格示例</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
tr:nth-child(even) {
background-color: #f2f2f2; /* 偶数行背景颜色 */
}
th, td {
padding: 15px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #4CAF50; /* 表头颜色 */
color: white;
}
</style>
</head>
<body>
<script>
// JavaScript部分通常用于动态生成数据,这里是静态数据
const data = [
{ cell1: 'Row 1, Cell 1', cell2: 'Row 1, Cell 2', cell3: 'Row 1, Cell 3' },
{ cell1: 'Row 2, Cell 1', cell2: 'Row 2, Cell 2', cell3: 'Row 2, Cell 3' },
{ cell1: 'Row 3, Cell 1', cell2: 'Row 3, Cell 2', cell3: 'Row 3, Cell 3' },
{ cell1: 'Row 4, Cell 1', cell2: 'Row 4, Cell 2', cell3: 'Row 4, Cell 3' }
];
// 创建表格元素并填充数据
const tableBody = document.createElement('tbody');
data.forEach((row, index) => {
const rowElement = document.createElement('tr');
Object.values(row).forEach(cellText => {
const cell = document.createElement('td');
cell.textContent = cellText;
rowElement.appendChild(cell);
});
if (index % 2 === 0) {
rowElement.classList.add('even-row'); // 添加CSS类以便应用样式
}
tableBody.appendChild(rowElement);
});
// 将表格添加到页面上
const table = document.createElement('table');
table.appendChild(tableHead); // 假设tableHead已经存在
table.appendChild(tableBody);
document.body.appendChild(table);
</script>
</body>
</html>
```
保存这个文件,然后在浏览器中访问`file://127.0.0.1:9000/index.html`即可看到一个四行三列的表格,并且隔行有颜色区分。