展示地址:https://gethtml.cn/project/2020/04/19/index.html
首先实现出一个静态效果(无js交互),当然了 这些表格我们是需要用js动态生成的。那么我们先来用JavaScript生成出一个静态表格
css样式
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.tools {
width: 100%;
height: 30px;
background-color: #efefef;
margin-bottom: 20px;
}
table {
width: 2889px;
table-layout: fixed;
border-collapse: collapse;
font-size: 12px;
}
table,
th,
td {
border: 0.5px solid #d9d9dd;
}
table th,
table td {
width: 107px;
height: 22px;
font-weight: 300;
padding: 0;
margin: 0;
}
table th {
font-weight: 400;
background-color: #efefef;
}
table td textarea {
display: block;
width: 107px;
height: 22px;
line-height: 22px;
border: none;
padding: 0 5px;
margin: 0;
resize: none;
cursor: default;
}
table td textarea:focus {
outline: none;
border: 2px solid lightskyblue;
line-height: 18px;
}
html很简单,只有一个<table></table>
var table = document.getElementsByTagName('table')[0]
// 1. 完成表格中的行标题
var headTrElement = document.createElement('tr')
var headInfo = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
for (var i = 0; i < 27; i++) {
var HeadThElement = document.createElement('th')
//从第2个开始显示标题
if (i > 0) {
HeadThElement.textContent = headInfo[i - 1]
}
headTrElement.appendChild(HeadThElement)
}
table.appendChild(headTrElement)
// 2. 完成表格
for (var i = 0; i < 200; i++) {
var trElement = document.createElement("tr")
// 完成表格内容
var thElement = document.createElement("th")
thElement.textContent = i + 1
trElement.appendChild(thElement)
for (var j = 0; j < 26; j++) {
var TdThElement = document.createElement('td')
trElement.appendChild(TdThElement)
}
table.appendChild(trElement)
}
至此,可以做出一个大致的样式。
下一步我们需要使用textarea
标签实现输入的功能,表格内容也就变成了
for (var j = 0; j < 26; j++) {
var tdElement = document.createElement('td')
// 加入文本
var textareaElement = document.createElement('textarea')
textareaElement.setAttribute('rows', '1')
textareaElement.setAttribute('readonly', 'readonly')
tdElement.appendChild(textareaElement)
trElement.appendChild(tdElement)
}
再往下,我们将完成单击时,改变所在行标题的颜色设置
var target = event.target
var trElement = tdElement.parentNode
var thElement = trElement.firstChild
thElement.style.backgroundColor = '#d9d9dd'
设置列标题的颜色变化
// 当前的<td>元素是<tr>元素的第几个子元素
var tdElements = trElement.childNodes
// 将tdElements转化为数组
var arr = Array.prototype.slice.call(tdElements)
// 获取当前点击的单元格所在列的索引
var index = arr.indexOf(tdElement)
console.log(index)
var headTrElement = table.getElementsByTagName('tr')[0]
var headThElements = headTrElement.getElementsByTagName('th')
var targetThElement = headThElements.item(index)
targetThElement.style.backgroundColor = '#d9d9dd'
最后实现的就是双击可以输入文字
focusTdElement.ondblclick = function () {
var target = event.target
var textareaElement
if (target.nodeName === 'TEXTAREA') {
textareaElement = target
} else if (target.nodeName === 'TD') {
textareaElement = target.firstChild
}
textareaElement.removeAttribute('readonly')
}