在线表格

最新推荐文章于 2024-04-23 09:31:56 发布

码小余の博客

最新推荐文章于 2024-04-23 09:31:56 发布

阅读量1.7k

点赞数 1

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/Cool_breeze_/article/details/105624761

版权

前端专栏收录该内容

78 篇文章 2 订阅

订阅专栏

在线表格案例

模仿的是腾讯文档

首先观察腾讯文档的表格效果，然后在构建出思路，开始编写代码

效果图：

QQ截图20200419170715.png

代码：

<!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 = 200
		for (var i = 0; i < rows; i++) {
			// 创建行
			var tableTrElement = document.createElement("tr")
			// 创建列标题
			var tableThElement = document.createElement("th")
			// 在列标题上写上内容（1~200）
			tableThElement.textContent = i + 1
			tableTrElement.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.target
    var TdElement
    if (target.nodeName === "TEXTAREA") {
        TdElement = target.parentNode
    } else if (target.nodeName === "TD") {
        TdElement = target
    }

    // 获取列标题元素
    var onclickTrElemet = TdElement.parentNode
    var columnThElement = onclickTrElemet.firstChild
    console.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.target
    target.removeAttribute("readonly")
}

效果图：

补充

// 设置文本域为只读
var textareaElement = target
textareaElement.setAttribute("readonly", "readonly")

get
target.removeAttribute(“readonly”)
}


效果图：

[外链图片转存中...(img-zTDIWFVo-1587308937385)]

- 补充

```javascript
// 设置文本域为只读
var textareaElement = target
textareaElement.setAttribute("readonly", "readonly")

待完善…