1.创建一个三行三列的表格(边框粗细为1px,表格内容随意填写),一个按钮,当点击按钮时表格的背景颜色变成绿色。
时间: 2024-03-20 07:39:39 浏览: 29
好的,下面是代码实现:
HTML代码:
```
<table id="myTable" border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<button onclick="changeColor()">点击变绿</button>
```
JavaScript代码:
```
function changeColor() {
var table = document.getElementById("myTable");
table.style.backgroundColor = "green";
}
```
解释一下:首先我们创建了一个三行三列的表格,并且设置了边框粗细为1px,表格内容随意填写。然后我们创建了一个按钮,当点击按钮时会触发changeColor()函数。这个函数会通过getElementById()方法获取到表格元素,然后设置其背景颜色为绿色。
相关问题
创建一个三行三列的表格(边框粗细为1px,表格内容随意填写),一个按钮,当点击按钮时表格的背景颜色变成绿色
好的,以下是HTML和CSS代码实现您的需求:
```html
<table id="myTable">
<tr>
<td>Apple</td>
<td>Banana</td>
<td>Orange</td>
</tr>
<tr>
<td>Carrot</td>
<td>Tomato</td>
<td>Cucumber</td>
</tr>
<tr>
<td>Chicken</td>
<td>Beef</td>
<td>Pork</td>
</tr>
</table>
<button onclick="changeColor()">Change color</button>
<style>
#myTable {
border-collapse: collapse;
border: 1px solid black;
}
#myTable td {
border: 1px solid black;
padding: 10px;
}
#myTable.green {
background-color: green;
}
</style>
<script>
function changeColor() {
var table = document.getElementById("myTable");
table.classList.toggle("green");
}
</script>
```
这段代码会创建一个三行三列的表格,并在下方放置一个按钮。当点击按钮时,表格的背景颜色会从默认的白色变成绿色。这是通过在CSS中定义一个名为“green”的类来实现的,然后通过JavaScript的classList属性将此类添加到或从整个表格中切换。请注意,我们还将表格的边框粗细设置为1px,并使用默认的黑色颜色。
1.创建一个三行三列的表格(边框粗细为Ipx,表格内容随意 填写),一个按钮,当点击按钮时表格的背景颜色变成绿色。
好的,以下是代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>表格背景颜色变绿色</title>
<style type="text/css">
table {
border: 1px solid black; /* 表格边框粗细为1px */
border-collapse: collapse; /* 合并表格边框 */
background-color: white; /* 表格背景颜色为白色 */
margin: 20px auto; /* 设置表格居中 */
}
td {
border: 1px solid black; /* 表格单元格边框粗细为1px */
padding: 10px; /* 设置单元格内边距 */
text-align: center; /* 设置单元格内文本居中 */
}
button {
display: block; /* 将按钮设置为块级元素,使其独占一行 */
margin: 20px auto; /* 设置按钮居中 */
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<button onclick="changeColor()">点击变绿色</button>
<script type="text/javascript">
function changeColor() {
var table = document.getElementsByTagName("table")[0]; // 获取表格元素
table.style.backgroundColor = "green"; // 将表格背景颜色设置为绿色
}
</script>
</body>
</html>
```
这是一个简单的 HTML 页面,其中包含了一个三行三列的表格和一个按钮。当点击按钮时,通过 JavaScript 修改表格的背景颜色为绿色。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)