把这两段代码连接成完整的代码
时间: 2024-03-02 17:08:39 浏览: 23
好的,下面是将HTML/CSS和JavaScript代码整合在一起的完整代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
#editable-table {
border-collapse: collapse;
width: 100%;
}
#editable-table th,
#editable-table td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
#editable-table img {
max-width: 100%;
height: auto;
cursor: pointer;
}
#modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.9);
}
#modal-content {
margin: auto;
display: block;
max-width: 80%;
max-height: 80%;
}
#caption {
margin: auto;
display: block;
width: 80%;
text-align: center;
color: #fff;
padding: 10px 0;
}
.close {
color: #fff;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<table id="editable-table">
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
<tr>
<td contenteditable="true">内容1</td>
<td contenteditable="true">内容2</td>
<td contenteditable="true">内容3</td>
</tr>
<tr>
<td contenteditable="true">内容4</td>
<td contenteditable="true">内容5</td>
<td contenteditable="true">内容6</td>
</tr>
</table>
<div id="modal">
<span class="close">×</span>
<img id="modal-content" />
<div id="caption"></div>
</div>
<script>
var cells = document.querySelectorAll("#editable-table td");
cells.forEach(function (cell) {
cell.addEventListener("click", function () {
var div = document.createElement("div");
div.contentEditable = "true";
div.innerHTML = cell.innerHTML;
cell.innerHTML = "";
cell.appendChild(div);
});
});
var modal = document.getElementById("modal");
var modalContent = document.getElementById("modal-content");
var captionText = document.getElementById("caption");
var closeBtn = document.getElementsByClassName("close")[0];
cells.forEach(function (cell) {
var imgs = cell.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].addEventListener("click", function () {
modal.style.display = "block";
modalContent.src = this.src;
captionText.innerHTML = this.alt;
});
}
});
closeBtn.onclick = function () {
modal.style.display = "none";
};
</script>
</body>
</html>
```
你可以将这段代码复制到一个HTML文件中,并在浏览器中打开该文件,就可以看到这个带有编辑和放大图片功能的表格了。
相关推荐
![](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)