写一个网页表格可下拉,7列,表格内容都居中,标题行为蓝色
时间: 2023-12-23 17:02:15 浏览: 34
好的,下面是一个简单的示例代码,实现了一个可下拉的7列表格,表格内容居中,标题行为蓝色:
```html
<!DOCTYPE html>
<html>
<head>
<title>可下拉表格示例</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: center;
padding: 8px;
border: 1px solid #ddd;
}
th {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<select onchange="updateTable(this.value)">
<option value="0">选择一项</option>
<option value="1">第一项</option>
<option value="2">第二项</option>
<option value="3">第三项</option>
</select>
<table id="myTable">
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
<th>列5</th>
<th>列6</th>
<th>列7</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
<td>内容5</td>
<td>内容6</td>
<td>内容7</td>
</tr>
</tbody>
</table>
<script>
function updateTable(value) {
if (value == 0) {
return;
}
let table = document.getElementById("myTable");
let row = table.insertRow(1);
row.insertCell(0).innerHTML = value;
row.insertCell(1).innerHTML = "内容2";
row.insertCell(2).innerHTML = "内容3";
row.insertCell(3).innerHTML = "内容4";
row.insertCell(4).innerHTML = "内容5";
row.insertCell(5).innerHTML = "内容6";
row.insertCell(6).innerHTML = "内容7";
}
</script>
</body>
</html>
```
在这个示例中,我们使用了一个 `select` 元素来提供下拉选项。当用户选择一个选项后,会调用 `updateTable` 函数来更新表格内容。这个函数会在表格的第二行插入一个新的行,并根据用户选择的值来设置第一列的内容。
注意我们在 CSS 中使用了 `border-collapse: collapse` 来消除单元格之间的间距,以及 `text-align: center` 来使表格内容居中。标题行的背景色和文字颜色也在这里设置。
希望这可以帮到你!
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)