1.创建一个三行三列的表格(边框粗细为1px,表格内容随意填写),一个按钮,当点击按钮时表格的背景颜色变成绿色。
时间: 2024-03-20 16:39:39 浏览: 63
好的,下面是代码实现:
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()方法获取到表格元素,然后设置其背景颜色为绿色。
相关问题
用js实现1.创建一个三行三列的表格(边框粗细为1px,表格内容随意填写),一个按钮,当点击按钮时表格的背景颜色变成绿色。
好的,下面是用纯JavaScript实现的代码:
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 id="myButton">点击变绿</button>
```
JavaScript代码:
```
var myButton = document.getElementById("myButton");
var myTable = document.getElementById("myTable");
myButton.addEventListener("click", function() {
myTable.style.backgroundColor = "green";
});
```
解释一下:我们首先通过getElementById()方法获取到按钮和表格元素,然后使用addEventListener()方法为按钮添加了一个"click"事件监听器,当按钮被点击时,会触发回调函数,这个函数会将表格的背景颜色设置为绿色。
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 修改表格的背景颜色为绿色。
阅读全文