用HTML+script编程实现,编写Javascript程序实现奇数行带背景色,粗体的九九乘法口诀表
时间: 2024-11-09 16:21:24 浏览: 7
基于javascript实现九九乘法表
5星 · 资源好评率100%
要使用HTML和JavaScript来实现一个带背景色、粗体显示的奇数行九九乘法口诀表,你可以按照以下步骤操作:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.odd-row {
background-color: lightgray;
font-weight: bold;
}
</style>
</head>
<body>
<table id="multiplicationTable">
</table>
<script>
function createMultiplicationTable() {
for (let i = 1; i <= 9; i++) {
let row = document.createElement('tr');
for (let j = 1; j <= i; j++) {
let cell = document.createElement('td');
cell.textContent = `${j} * ${i} = ${i*j}`;
if (i % 2 !== 0) { // 判断是否为奇数行
cell.classList.add('odd-row');
}
row.appendChild(cell);
}
document.getElementById('multiplicationTable').appendChild(row); // 添加到表格中
}
}
window.onload = function () {
createMultiplicationTable();
};
</script>
</body>
</html>
```
在这个代码片段中,我们首先创建了一个空的`<table>`元素,然后在JavaScript函数`createMultiplicationTable`中动态生成每个单元格,并检查当前列索引(`i`)是否为奇数,如果是,则给该单元格添加`.odd-row`类,使其有背景颜色和粗体样式。当网页加载完成时,会自动调用这个函数生成乘法表。
阅读全文