js操作表格II

最新推荐文章于 2023-07-19 17:40:24 发布

道法—自然

最新推荐文章于 2023-07-19 17:40:24 发布

阅读量130

点赞数 1

分类专栏：前端页面

本文链接：https://blog.csdn.net/wyqwilliam/article/details/103542999

版权

本文详细介绍了如何使用JavaScript进行高级表格操作，包括动态创建和删除表格行、修改单元格内容、表格排序以及交互式功能的实现，助你提升网页数据展示的用户体验。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js操作表格</title>
		<!--声明style样式代码域-->
		<style type="text/css">
		body{
			text-align: center;
		}
			table{
				border: solid 1px;
				margin-top: 20px;
				margin: auto;
			}
			tr{
				height: 20px;
			}
			
		</style>
		<!--声明JS代码域-->
		<script type="text/javascript">
			//实现新增行
			function updateCount(btn){
				//获取要修改的td元素对象
				//获取所要修改的元素所在的行
				var tr=btn.parentNode.parentNode;
				//获取改行下的所有单元格对象数组
				var cs=tr.cells;
				//获取要修改的单元格对象
				var td=cs[3];
				//修改单元格内容为文本框
				if(!isNaN(td.innerHTML)){
					td.innerHTML="<input type='text' value='"+td.innerHTML+"' onblur='saveCount(this)' />";
				}
			}
			//保存数据
			function saveCount(inp){
				//获取要修改的单元格的对象
				var td=inp.parentNode();
				//修改数量
				td.innerHTML=inp.value;
			}
			//删除行
			function delRow(btn){
				if(window.confirm("你确定要删除吗？")){
					//获取要删除的行
					var tr=btn.parentNode.parentNode;
					//获取表格对象
					var ta=document.getElementById("ta");
					//删除行，主要获取当前行的角标
					ta.deleteRow(tr.rowIndex)
				}
			}
			/**
			 * 最终实现的目的是：
			 * 最上边的全选按钮能够控制其他的按钮，同时其他的按钮也能够控制最上边的按钮
			 */
			//使用全选按钮去控制其他的按钮
			function chooseAll(){
				//获取全选的CheckBox对象
				var ch=window.document.getElementById("ck");
				//获取所有的CheckBox对象
				var

最低0.47元/天解锁文章

道法—自然

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js操作表格II

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>js操作表格</title>  <style type="text/css"> body{ text-align: ...
复制链接

扫一扫

专栏目录