.编写代码,在页面上显示一个表格,表格的行数和列数由用户通过对话框来指定,要求表格奇数行和偶数行分别设置不同的背景颜色,单元格中显示“第M行第N列”,M为该单元格所在的行数,N为该单元格所在的列数。
时间: 2024-10-24 16:09:48 浏览: 19
为了实现这个功能,我们可以使用HTML和JavaScript结合来做。首先,创建一个HTML结构,包含输入框让用户选择行数和列数,以及一个按钮用于生成表格:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>动态表格生成</title>
</head>
<body>
<h1>生成表格</h1>
<label for="rows">请输入行数:</label>
<input type="number" id="rows" min="1">
<label for="columns">请输入列数:</label>
<input type="number" id="columns" min="1">
<button onclick="generateTable()">生成</button>
<div id="table-container"></div>
</body>
</html>
```
然后,在JavaScript文件中编写`generateTable`函数:
```javascript
function generateTable() {
const rowsInput = document.getElementById('rows').value;
const columnsInput = document.getElementById('columns').value;
const tableContainer = document.getElementById('table-container');
let tableHtml = '<table>';
for (let i = 0; i <= rowsInput; i++) {
let rowClass = i % 2 === 0 ? 'even-row' : 'odd-row';
tableHtml += `<tr class="${rowClass}">
${' '.repeat(columnsInput - 1)}<td>第${i+1}行第1列</td>`;
for (let j = 1; j <= columnsInput; j++) {
tableHtml += `<td>第${i+1}行第${j+1}列</td>`;
}
tableHtml += '</tr>';
}
tableHtml += '</table>';
tableContainer.innerHTML = tableHtml;
// 添加背景颜色样式
const rows = tableContainer.querySelectorAll('.odd-row, .even-row');
rows.forEach((row, index) => {
if (index % 2 === 0) {
row.style.backgroundColor = 'lightblue'; // 偶数行背景色
} else {
row.style.backgroundColor = 'lightgray'; // 奇数行背景色
}
});
}
// 当浏览器加载完DOM后调用一次生成表格
window.onload = generateTable;
```
在这个示例中,我们首先根据用户输入创建一个动态的表格,并为其添加了不同的背景颜色。
阅读全文