案例描述
展示位址: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')
}
複制