在线表格案例
模仿的是腾讯文档
- 首先观察腾讯文档的表格效果，然后在构建出思路，开始编写代码
效果图：
代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>在线表格</title></head><style type="text/css">table {table-layout: fixed;border-collapse: collapse;}table, th, td {border: 0.5px solid #d9d9dd;}</style><body><table></table></body><script type="text/javascript">var list = ['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']// 获取表格元素var tableElement = document.getElementsByTagName("table")[0]// 创建首行var firstTrElement = document.createElement("tr")tableElement.appendChild(firstTrElement)for (var i = 0; i < list.length + 1; i++) {var firstThElements = document.createElement("th")// 想办法把第一个单元格空出来if (i > 0) {firstThElements.textContent = list[i-1]}firstTrElement.appendChild(firstThElements)}// 完成表格// 定义行数var rows = 200for (var i = 0; i < rows; i++) {// 创建行var tableTrElement = document.createElement("tr")// 创建列标题var tableThElement = document.createElement("th")// 在列标题上写上内容（1~200）tableThElement.textContent = i + 1tableTrElement.appendChild(tableThElement)// 完成表格内容（创建列）for (var j = 0; j < list.length; j++) {var tableTdElement = document.createElement("td")tableTrElement.appendChild(tableTdElement)}tableElement.appendChild(tableTrElement)}</script>
</html>
- 然后在设置表格样式
<style type="text/css"> body {width: 2889px;}table {/* 设置宽度：为了让效果正常显示 */table-layout: fixed;border-collapse: collapse;}table,th,td {border: 0.5px solid #d9d9dd;}table th,table td {width: 107px;height: 22px;}/* 设置列标题的宽度 */table th {width: 54px;}
</style>
效果图：
这样看着就舒服多了
- 然后创建一个
textarea文本域
// 完成表格内容（创建列）
for (var j = 0; j < list.length; j++) {var tableTdElement = document.createElement("td")tableTrElement.appendChild(tableTdElement)// 设置文本域var textareaElement = document.createElement("textarea")textareaElement.setAttribute("rows", 1)tableTdElement.appendChild(textareaElement)
}
tableElement.appendChild(tableTrElement)
效果图：
然后变成了这样，所以还要设置样式，把多余的样式删掉
/* 设置textarea文本域样式 */
table td textarea {display: block;width: 107px;height: 22px;line-height: 22px;border: none;padding: 0 5px;margin: 0;resize: none; /* 把右下角那个标识去掉：防止随意拖动 */cursor: default;
}
效果图：
因为按照逻辑，单击的时候不应该可以输入内容，所以如下设置
// 完成表格内容（创建列）
for (var j = 0; j < list.length; j++) {var tableTdElement = document.createElement("td")tableTrElement.appendChild(tableTdElement)// 设置文本域var textareaElement = document.createElement("textarea")textareaElement.setAttribute("rows", 1)// 设置单击只读textareaElement.setAttribute("readonly", "readonly")tableTdElement.appendChild(textareaElement)
}
tableElement.appendChild(tableTrElement)
- 鼠标单击，列标题元素变亮
onclickTdElement.onclick = function(event) {// 点击单元格使它所对应的行标题，列标题被点亮var onclickThElements = document.getElementsByTagName("th")// 获取鼠标点击var target = event.targetvar TdElementif (target.nodeName === "TEXTAREA") {TdElement = target.parentNode} else if (target.nodeName === "TD") {TdElement = target}// 获取列标题元素var onclickTrElemet = TdElement.parentNodevar columnThElement = onclickTrElemet.firstChildconsole.log(columnThElement)columnThElement.style.backgroundColor = "#d9d9dd"
}
效果图：
- 鼠标单击，行标题元素变亮
// 获取列表题元素
var tdElements = onclickTrElemet.childNodes
var NotelistToArr = Array.prototype.slice.call(tdElements)
var index = NotelistToArr.indexOf(TdElement)var firstTrElements = document.getElementsByTagName("tr")[0]
var thElements = firstTrElements.getElementsByTagName("th")
var targetThElement = thElements.item(index)
targetThElement.style.backgroundColor = "#d9d9dd"
效果图：
- 每个单元格双击的逻辑
// 每个单元格的双击逻辑
onclickTdElement.ondblclick = function(event) {var target = event.targettarget.removeAttribute("readonly")
}
效果图：
- 补充
// 设置文本域为只读
var textareaElement = target
textareaElement.setAttribute("readonly", "readonly")
get
target.removeAttribute(“readonly”)
}
效果图：[外链图片转存中...(img-zTDIWFVo-1587308937385)]- 补充```javascript
// 设置文本域为只读
var textareaElement = target
textareaElement.setAttribute("readonly", "readonly")
待完善…
