JavaScript DOM操作之表格操作(4)

最新推荐文章于 2024-01-04 20:20:53 发布
最新推荐文章于 2024-01-04 20:20:53 发布
阅读量312 收藏 1
点赞数
分类专栏： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014661569/article/details/45912779
版权

/**

*dom操作表格

*表格内容排序

*/

HTML文件代码


<!DOCTYPE html>
<html>
  <head>
    <title>domTableOperate.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/domTableOperate.js"></script>
  </head>
  <body>

<input type="button" value="SORT" id="btn3" style="margin-top:50px;"><br/>
    <table  border="1" width="500px;" id="tab3">
<thead>
<tr>
<td>ID</td>
<td>NAME</td>
<td>AGE</td>
<td>OPERATE</td>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>tom</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>22</td>
<td>wsm</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>43</td>
<td>ali</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>14</td>
<td>lisi</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>58</td>
<td>alid</td>
<td>18</td>
<td></td>
</tr>
<tr>
<td>62</td>
<td>skd</td>
<td>33</td>
<td></td>
</tr>
<tr>
<td>27</td>
<td>sawm</td>
<td>26</td>
<td></td>
</tr>
<tr>
<td>38</td>
<td>tim</td>
<td>20</td>
<td></td>
</tr>
</tbody>
    </table>
  </body>
</html>


js文件代码


window.onload = function(){

var table3 = document.getElementById('tab3');
    var btn3 = document.getElementById('btn3');
    btn3.onclick = function(){
    var arr = [];
    for(var i = 0;i<table3.tBodies[0].rows.length;i++){
    arr[i]  = table3.tBodies[0].rows[i];
    }
    arr.sort(function(tr1,tr2){
    var n1 = parseInt(tr1.cells[0].innerHTML);
    var n2 = parseInt(tr2.cells[0].innerHTML);
    return n1-n2;
    });
    for(var i= 0;i<arr.length;i++){
    table3.tBodies[0].appendChild(arr[i]);
    }
    }

}

----Neal----
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript DOM操作表格及样式
10-24
标题《JavaScript DOM操作表格及样式》介绍了JavaScript如何通过DOM操作HTML文档中的表格元素以及如何对表格进行样式设计和控制。DOM是文档对象模型（Document Object Model），它是对文档的抽象，通过它我们可以...
JavaScript表格常用操作方法汇总
10-24
创建表格通常通过`<table>`标签来实现，但在JavaScript中，我们可以通过DOM操作动态创建。例如，我们可以创建一个名为`CTable`的构造函数，接受表格ID和行数作为参数。`CTable`构造函数会查找指定ID的表格元素，并...
JS DOM之table
SkullSky的博客
03-13 718
表格的结构： tHead      :   表格头 tBodies   :   表格头 tFoot       :   表格尾 rows       :   行 cells        :   列 示例代码： window.onload = function(){ data = [ {id:1,username:'leo'
JavaScript DOM操作表格案例
侯春强的博客
10-14 667
使用DOM创建表格 方式一：（JavaScript DOM创建表格） Title #outer { width: 500px; height: 500px; margin: auto; } onload = functio
使用html dom操作表格,JavaScript DOM对表格的操作
weixin_29133959的博客
06-23 525
了解下table的属性与子标签summary 属性：用于概括整个表格的内容。它对于搜索引擎的机器人记录信息十分重要。bordercolor 属性：用来设置表格边框的颜色。但它在不同的浏览器下显示的效果不一致。(不推荐使用bordercolor 属性，而推荐使用CSS 样式表的border 属性来进行设置)cellspacing 属性：用来设置表格的单元格之间的间距。(推荐使用CSS 样式表的bor...
JavaScript DOM—节点操作
Jin_Xiang123的博客
01-04 1464
文档对象模型（Document Object Model，简称DOM）是一种基于树状结构的编程接口，用于操作HTML、XML和SVG等文档。它将文档表示为一个树状结构，其中每个节点代表文档中的一个元素、属性、文本或其他类型的内容。DOM提供了一组标准的对象和方法，可以通过JavaScript等编程语言来访问和操作文档的各个部分。通过DOM，开发者可以使用JavaScript来读取、修改、添加和删除文档的元素、属性和内容。DOM树是由节点组成的。文档节点是DOM树的根节点，它是整个文档的入口点。
JavaScriptDOM操作的性能优化
读心悦
10-27 599
浏览器的重排和重绘是比较消耗性能的操作，所以网页性能优化的手段就是减少重排和重绘的操作。
75 DOM操作——DOM快速操作表格元素
Blog of Lytracy
11-22 1054
1、获取表格 ⾸先获取到表格，暂时⽤table1代表整个表格 2、DOM来获取表头表尾、 因为表头表尾只能存在⼀个 ，获取表头table1.tHead 获取表尾table1.tFoot 3、DOM获取表体 table1.tBodies获取到的是⼀个集合，因为可以存在多个tbody 4、获取行数的集合 获取⾏数的集合，即需要获取表格对象⾥的tr⾏数的集合 rows 5、获取⾏⾥⾯单元格td的数量 是⼀个集合， 所以获取内部第⼀个需要cells[0]获取 cells ...
DOM元素操作之表格的增添和删除
m0_56071898的博客
05-09 640
文章目录前言一、表格的增添1.html代码2.js代码二、表格的删除js代码总结 前言 JavaScript关于DOM元素的操作，本章重点是通过onclick点击事件获取当前节点所在的父节点，以此来删除当前节点 一、表格的增添 1.html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
DOM表格操作 添加删除
baobao__的博客
09-08 1119
DOM表格操作1.获取表格元素 1.获取表格元素
Javascript之BOM与DOM讲解
热门推荐
晨港飞燕的专栏
05-13 8万+
一.Javascript组成JavaScript的实现包括以下3个部分：ECMAScript(核心)描述了JS的语法和基本对象。文档对象模型 （DOM）处理网页内容的方法和接口浏览器对象模型（BOM）与浏览器交互的方法和接口javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异,IE 扩展了 BOM，...
JavaScript基础DOM操作小练习（一）
欢迎来到长风沛雨的博客
11-15 1822
整一些可以练着玩的熟悉语法的DOM小例子
javascript DOM操作之动态删除TABLE多行
12-02
在JavaScript中，动态地删除HTML表格（TABLE）中的多行数据是一种常见的DOM操作。DOM（文档对象模型）是HTML和XML文档的编程接口，它允许我们通过脚本编程的方式动态地修改文档结构、样式和内容。 首先，需要了解...
javascript操作表格
12-09
在实际开发中，JavaScript操作表格通常涉及到DOM（Document Object Model）操作，例如`document.getElementById()`、`innerHTML`属性、`appendChild()`、`removeChild()`等方法。此外，为了提供更好的用户体验，可能...
探索算法迷宫：揭秘寻找最短路径的神兵利器
08-19
数据结构是计算机科学中的一个基本概念，它指的是数据的组织、管理和存储方式，以及对数据的操作。数据结构使得数据的访问和修改更加高效和有序。常见的数据结构包括： 1. **数组**（Array）：一种线性数据结构，可以存储相同类型的元素，并通过索引访问。 2. **链表**（Linked List）：一种线性数据结构，由一系列节点组成，每个节点包含数据部分和指向下一个节点的指针。 3. **栈**（Stack）：一种后进先出（LIFO, Last In First Out）的数据结构，只能在一端进行添加或删除操作。 4. **队列**（Queue）：一种先进先出（FIFO, First In First Out）的数据结构，允许在一端添加元素，在另一端删除元素。 5. **哈希表**（Hash Table）：通过键值对存储数据的数据结构，可以快速地通过键来访问数据。 6. **树**（Tree）：一种层次结构的数据结构，每个节点有零个或多个子节点，通常用于表示具有层次关系的数据。 7. **图**（Graph）：由顶点（节点）和边组成，可以表示复杂的关系和网络结构。 每种数据结构都有其
基于Android习惯养成APP设计与实现.docx
08-19
基于Android习惯养成APP设计与实现.docx
YOLO算法在生物信息学中的创新应用：从基因组到细胞成像
最新发布
08-19
YOLO（You Only Look Once）算法是一种流行的实时目标检测系统，通常用于计算机视觉领域。然而，其原理和效率同样适用于生物信息学领域，特别是在基因组学、蛋白质结构分析和细胞成像等方面。本文将探讨YOLO算法在生物信息学中的多种应用，包括基因组序列识别、蛋白质结构分类和细胞图像分析，并提供相应的代码示例。 YOLO算法在生物信息学领域展现出巨大的潜力，尤其是在需要快速和自动化分析的场景中。随着深度学习技术的不断进步，我们可以预见YOLO算法将在生物信息学中扮演越来越重要的角色。 参考文献 YOLO: Real-Time Object Detection Deep Learning for Bioinformatics 请注意，本文为示例性质，实际编写时需要根据具体主题和要求进行调整和补充。
知识分享辅助工具 - ObsidianPublishToCSDN-V1.1.py
08-19
知识分享辅助工具：ObsidianPublishToCSDN-V1.1.py 简介优化： 告别繁琐，拥抱高效！ObsidianPublishToCSDN-V1.1.py 是专为 Obsidian 用户打造的知识分享利器，旨在将您的笔记内容无缝对接至CSDN平台，让知识分享变得更加轻松快捷。 核心功能亮点： 智能图片提取：自动识别并收集Obsidian笔记中引用的所有图片，一键整理至指定文件夹，无需手动逐一查找，大幅提升发布效率。 Markdown优化转换：精准转换Obsidian的Markdown格式为CSDN兼容格式，保留原有排版与样式，确保内容呈现的专业与美观。 双链处理：特别针对Obsidian的双链特性，提供灵活处理方案，无论是转换为普通链接还是保留注释说明，均可按需配置，让内容更加适应CSDN环境。 高效文档生成：一键生成适用于CSDN发布的Markdown文档，减少手动编辑时间，让您的创意与知识更快触达读者。 持续迭代更新：本工具正处于活跃开发阶段，我们倾听每一位用户的反馈，不断优化功能，修复bug，确保为您提供最稳定、最便捷的使用体验。
电网预测数据集，日期 小时 干球温度 露点温度 湿球温度 湿度 电力负荷 电价
08-19
日期 小时 干球温度 露点温度 湿球温度 湿度 电力负荷 电价
javascript dom操作表格
04-06
JavaScript DOM操作表格是指使用JavaScript操作HTML文档中的表格元素，包括获取表格数据、修改表格样式、添加或删除表格行列等操作。通过使用DOM方法和属性，可以轻松地实现对表格的各种操作，提高页面交互、动态效果和用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值