You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
270 lines
5.8 KiB
270 lines
5.8 KiB
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<title>可编辑表格</title>
|
|
<script language="JavaScript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
|
|
<style>
|
|
table {
|
|
table-layout: fixed;
|
|
width: 40%;
|
|
/* 或者你希望的固定宽度 */
|
|
border-collapse: collapse;
|
|
/* 使表格边框合并为一条线 */
|
|
border: 1px solid #000;
|
|
/* 设置边框的粗细和颜色 */
|
|
}
|
|
|
|
table tr [contenteditable] input {
|
|
width: 100%;
|
|
/* 输入框宽度占满整个单元格 */
|
|
height: 100%;
|
|
/* 输入框高度占满整个单元格 */
|
|
box-sizing: border-box;
|
|
/* 确保宽度和高度包括内边距和边框 */
|
|
padding: 0;
|
|
/* 根据需要调整内边距 */
|
|
margin: 0;
|
|
/* 移除外边距 */
|
|
}
|
|
|
|
table tr {
|
|
height: 50px;
|
|
}
|
|
|
|
table {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
tr[contenteditable] {
|
|
display: flex;
|
|
align-items: center;
|
|
/* 垂直居中 */
|
|
}
|
|
|
|
div {
|
|
border: 0px solid #ccc;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
padding: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<table id="oTable" style="background-color:#eeeeee;" bordercolor="#aaaaaa" border="1" cellpadding="0"
|
|
cellpadding="2">
|
|
<thead>
|
|
<tr>
|
|
<th colspan="4">
|
|
<font color="red" size="6">全网查找满分姓名</font>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<thead>
|
|
<tr>
|
|
<th>名字</th>
|
|
<th>分数</th>
|
|
<th>名字</th>
|
|
<th>分数</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr>
|
|
<td>
|
|
<div contenteditable="true"></div>
|
|
</td>
|
|
<td>
|
|
<div></div>
|
|
</td>
|
|
<td>
|
|
<div contenteditable="true"></div>
|
|
</td>
|
|
<td>
|
|
<div></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div contenteditable="true"></div>
|
|
</td>
|
|
<td>
|
|
<div></div>
|
|
</td>
|
|
<td>
|
|
<div contenteditable="true"></div>
|
|
</td>
|
|
<td>
|
|
<div></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div contenteditable="true"></div>
|
|
</td>
|
|
<td>
|
|
<div></div>
|
|
</td>
|
|
<td>
|
|
<div contenteditable="true"></div>
|
|
</td>
|
|
<td>
|
|
<div></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div contenteditable="true"></div>
|
|
</td>
|
|
<td>
|
|
<div></div>
|
|
</td>
|
|
<td>
|
|
<div contenteditable="true"></div>
|
|
</td>
|
|
<td>
|
|
<div></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div contenteditable="true"></div>
|
|
</td>
|
|
<td>
|
|
<div></div>
|
|
</td>
|
|
<td>
|
|
<div contenteditable="true"></div>
|
|
</td>
|
|
<td>
|
|
<div></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div contenteditable="true"></div>
|
|
</td>
|
|
<td>
|
|
<div></div>
|
|
</td>
|
|
<td>
|
|
<div contenteditable="true"></div>
|
|
</td>
|
|
<td>
|
|
<div></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div contenteditable="true"></div>
|
|
</td>
|
|
<td>
|
|
<div></div>
|
|
</td>
|
|
<td>
|
|
<div contenteditable="true"></div>
|
|
</td>
|
|
<td>
|
|
<div></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div contenteditable="true"></div>
|
|
</td>
|
|
<td>
|
|
<div></div>
|
|
</td>
|
|
<td>
|
|
<div contenteditable="true"></div>
|
|
</td>
|
|
<td>
|
|
<div></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div contenteditable="true"></div>
|
|
</td>
|
|
<td>
|
|
<div></div>
|
|
</td>
|
|
<td>
|
|
<div contenteditable="true"></div>
|
|
</td>
|
|
<td>
|
|
<div></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div contenteditable="true"></div>
|
|
</td>
|
|
<td>
|
|
<div></div>
|
|
</td>
|
|
<td>
|
|
<div contenteditable="true"></div>
|
|
</td>
|
|
<td>
|
|
<div></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div contenteditable="true"></div>
|
|
</td>
|
|
<td>
|
|
<div></div>
|
|
</td>
|
|
<td>
|
|
<div contenteditable="true"></div>
|
|
</td>
|
|
<td>
|
|
<div></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div contenteditable="true"></div>
|
|
</td>
|
|
<td>
|
|
<div></div>
|
|
</td>
|
|
<td>
|
|
<div contenteditable="true"></div>
|
|
</td>
|
|
<td>
|
|
<div></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div contenteditable="true"></div>
|
|
</td>
|
|
<td>
|
|
<div></div>
|
|
</td>
|
|
<td>
|
|
<div contenteditable="true"></div>
|
|
</td>
|
|
<td>
|
|
<div></div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</body>
|
|
<script>
|
|
let editableDivs = $('div[contenteditable="true"]');
|
|
editableDivs.blur(function (e) {
|
|
let currentElement = $(e.target);
|
|
let htmlContent = currentElement.html();
|
|
console.log(htmlContent);
|
|
});
|
|
</script>
|
|
</html> |