JavaScript学习笔记（十三）

作者：忧之灵_435 | 来源：互联网 | 2023-09-04 13:50

JavaScript学习笔记（十三）下面弄个实例，运用Dom的知识利用js来动态创建表格有两种格式，appendChild()和insertRow、insertCell()。但第一种有可能在IE上有问题，所以推荐使用第二种。1、insertRow(index)：index从0开始这个函数将新行添加到index的那一行前，比如insertRow(0),是将新行添加到第一

Javascript学习笔记（十三）

下面弄个实例，运用Dom的知识

利用js来动态创建表格有两种格式，appendChild()和insertRow、insertCell()。但第一种有可能在IE上有问题，所以推荐使用第二种。

1、insertRow(index)：index从0开始

这个函数将新行添加到index的那一行前，比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于 insertRow(-1)，将新行添加到表的最后。一般我们在使用的时候都是：

objTable.insertRow (objTable.rows.length)就是为表格objTable在最后新增一行。

insertCell()和insertRow的用法相同。

2、deleteRow(index)：index从0开始

删除指定位置的行，要传入的参数：Index是行在表格中的位置，可以下面的方法取得然后去删除：

var row = document.getElementById("行的Id");

var index = row.rowIndex; //有这个属性

objTable.deleteRow(index);

在使用过程中，删除表格的行的时候，如果删除了某一行，那么表格行数是马上就变化的，rows.length总是在变小，所以如果你要删除表格的所有行：

function removeAllRow() {

var objTable = document.getElementById("myTable");

var length = objTable.rows.length;

for (var i = 1; i

objTable.deleteRow(i);

}

3、setAttribute()方法,动态设置单元格与行的属性

格式如下：setAttribute(属性，属性值)

var objMyTable = document.getElementById("myTable");

objMyTable.setAttribute("border", 1); //为表格设置边框为1

在使用的时候遇到一个设置样式的问题，不能用

setAttribute("class","inputbox1");而应该使用

setAttribute("className","inputbox1")，

4、创建表格

了解了行与单元格的增删那就可以创建表格了。

第一步：你需要有一个你去动态变化的表格，这里讲的是已经存在页面的表格,我们设置一个id：myTable

　　var objMyTable = document.getElementById("myTable");

第二步：创建行与列的对象

var index = objMyTable.rows.length;

var nextRow = objMyTable.insertRow(index); //在最后的行

//var nextRow = objMyTable.insertRow(0); //在最前的行

下面是示例代码

var Count = false; //控制交替换行

var NO = 1; //行号

function addRow() {

Count = !Count;

//添加一行

var newTr = table.insertRow(table.rows.length); //在最后新增一行

//var newTr = table.insertRow(0); //在最前面新增一行

//添加两列

var newTd0 = newTr.insertCell();

var newTd1 = newTr.insertCell();

var newTd2 = newTr.insertCell();

//设置列内容和属性

if (Count) {

newTr.style.background = "#FFE1FF";

}

else {

newTr.style.background = "#FFEFD5";

}

NO++;

newTd0.innerHTML = ';

newTd1.innerText = "第" + NO + "行";

newTd2.innerHTML = ';

}

script>

<body>

td>

<td>

第1行

td>

<td>

td>

tr>

table>

form>

body>

推荐阅读

text
《JavaScript高等顺序设计》进修笔记：JavaScript中的事宜流和事宜处置惩罚顺序

JavaScript和HTML之间的交互是经由过程事宜完成的。事宜：文档或浏览器窗口中发作的一些特定的交互霎时。能够运用侦听器（或处置惩罚递次来预订事宜），以便事宜发作时实行相应的 ... [详细]

蜡笔小新 2023-12-11 11:40:52
io
JS进修笔记——闭包的运转机制和作用域

本文介绍了闭包的定义和运转机制，重点解释了闭包如何能够接触外部函数的作用域中的变量。通过词法作用域的查找规则，闭包可以访问外部函数的作用域。同时还提到了闭包的作用和影响。 ... [详细]

蜡笔小新 2023-12-14 18:45:00
int
开发笔记:加密&json&StringIO模块&BytesIO模块

篇首语：本文由编程笔记#小编为大家整理，主要介绍了加密&json&StringIO模块&BytesIO模块相关的知识，希望对你有一定的参考价值。一、加密加密 ... [详细]

蜡笔小新 2023-12-14 15:18:35
int
如何使用Java获取服务器硬件信息和磁盘负载率

本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务，并获取服务器的磁盘信息，并将结果输出。然后在本地使用JS编写一个AJAX脚本，远程请求服务端的程序，得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]

蜡笔小新 2023-12-14 13:56:20
int
关于cuowu类的错误提示和使用AdjustmentListener的问题

本文讨论了一个关于cuowu类的问题，作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案，并给出了两个可能导致错误的原因。 ... [详细]

蜡笔小新 2023-12-13 22:09:56
text
Voicewo在线语音识别转换jQuery插件的特点和示例

本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]

蜡笔小新 2023-12-13 20:01:16
数组
java 线程死锁模拟

1，关于死锁的理解死锁，我们可以简单的理解为是两个线程同时使用同一资源，两个线程又得不到相应的资源而造成永无相互等待的情况。 2，模拟死锁背景介绍：我们创建一个朋友 ... [详细]

蜡笔小新 2023-12-13 19:12:25
io
Web学习历程记录（七）——Tomcat基本概念和配置

本文介绍了Web学习历程记录中关于Tomcat的基本概念和配置。首先解释了Web静态Web资源和动态Web资源的概念，以及C/S架构和B/S架构的区别。然后介绍了常见的Web服务器，包括Weblogic、WebSphere和Tomcat。接着详细讲解了Tomcat的虚拟主机、web应用和虚拟路径映射的概念和配置过程。最后简要介绍了http协议的作用。本文内容详实，适合初学者了解Tomcat的基础知识。 ... [详细]

蜡笔小新 2023-12-13 17:08:24
grid
ASP.NET2.0数据教程之十四：使用FormView的模板

本文介绍了在ASP.NET 2.0中使用FormView控件来实现自定义的显示外观，与GridView和DetailsView不同，FormView使用模板来呈现，可以实现不规则的外观呈现。同时还介绍了TemplateField的用法和FormView与DetailsView的区别。 ... [详细]

蜡笔小新 2023-12-13 08:07:00
io
C#制作Java+Mysql+Tomcat环境安装程序，一键式安装教程

本文介绍了如何使用C#制作Java+Mysql+Tomcat环境安装程序，实现一键式安装。通过将JDK、Mysql、Tomcat三者制作成一个安装包，解决了客户在安装软件时的复杂配置和繁琐问题，便于管理软件版本和系统集成。具体步骤包括配置JDK环境变量和安装Mysql服务，其中使用了MySQL Server 5.5社区版和my.ini文件。安装方法为通过命令行将目录转到mysql的bin目录下，执行mysqld --install MySQL5命令。 ... [详细]

蜡笔小新 2023-12-12 19:29:55
io
前端人员必须知道的三个问题及其发展阶段

本文介绍了前端人员必须知道的三个问题，即前端都做哪些事、前端都需要哪些技术，以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外，还介绍了一些后端服务，如Node.js。 ... [详细]

蜡笔小新 2023-12-12 12:45:59
io
绕过WAF的XSS检测机制及构建XSS payload的方法

本文介绍了绕过WAF的XSS检测机制的方法，包括确定payload结构、测试和混淆。同时提出了一种构建XSS payload的方法，该payload与安全机制使用的正则表达式不匹配。通过清理用户输入、转义输出、使用文档对象模型（DOM）接收器和源、实施适当的跨域资源共享（CORS）策略和其他安全策略，可以有效阻止XSS漏洞。但是，WAF或自定义过滤器仍然被广泛使用来增加安全性。本文的方法可以绕过这种安全机制，构建与正则表达式不匹配的XSS payload。 ... [详细]

蜡笔小新 2023-12-11 19:42:30
int
Java学习笔记之使用反射+泛型构建通用DAO

本文介绍了使用反射和泛型构建通用DAO的方法，通过减少代码冗余度来提高开发效率。通过示例说明了如何使用反射和泛型来实现对不同表的相同操作，从而避免重复编写相似的代码。该方法可以在Java学习中起到较大的帮助作用。 ... [详细]

蜡笔小新 2023-12-11 18:38:04
int
Hibernate基础映射

在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]

蜡笔小新 2023-12-14 10:57:47
数组
如何提高PHP编程技能及推荐高级教程

本文介绍了如何提高PHP编程技能的方法，推荐了一些高级教程。学习任何一种编程语言都需要长期的坚持和不懈的努力，本文提醒读者要有足够的耐心和时间投入。通过实践操作学习，可以更好地理解和掌握PHP语言的特异性，特别是单引号和双引号的用法。同时，本文也指出了只走马观花看整体而不深入学习的学习方式无法真正掌握这门语言，建议读者要从整体来考虑局部，培养大局观。最后，本文提醒读者完成一个像模像样的网站需要付出更多的努力和实践。 ... [详细]

蜡笔小新 2023-12-11 18:38:37

忧之灵_435

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章