js动态控制表单表格

2024-06-19 20:32
文章标签 表单 js 表格 动态控制

本文主要是介绍js动态控制表单表格,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

js动态控制表单表格,这里操作只讲,添加一行,删除一行,删除某一行某一列。

直接放代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><table id="tabl" border=1 cellpadding=10 cellspacing=0><thead bgcolor="#00B3FF"><tr><td>姓名</td><td>联系方式</td></tr></thead><tbody><tr><td>孟小伟</td><td>686898</td></tr><tr><td>静妹妹</td><td>686898</td></tr><tr><td>臭猪 </td><td>686898</td></tr></tbody></table><!--表单基础特别举例--><form>
<!--这里有个有趣的东西,for=“cao” ,然后后面的<input />添加id为cao,你点击这里的文字,会在input直接提示你输入--><p><label for="cao">名字是什么,点击我就可以到框框里面:</label><input type="text" id="cao" /></p></form><script>window.onload = function() {/*创建一行,执行chuang()函数*/chuang();/*删除一行,或者某一行一列,执行dete函数*/dete();function chuang() {var tab = document.getElementById("tabl");/*取到要操作的对象*/var tr = tab.insertRow(2);/*给其添加序号为2的行*/var Ptext = new Array();/*创建文本节点组数*/Ptext[0] = document.createTextNode("黑猪");Ptext[1] = document.createTextNode("998342");for(var i = 0; i < Ptext.length; i++) {/*遍历*/var cd = tr.insertCell(i);/*按序号创建列*/cd.appendChild(Ptext[i]);/*把文本节点添加到对应的列*/}} function dete(){var tab = document.getElementById("tabl");tab.deleteRow(4);/*删除一行*/tab.rows[3].deleteCell(1);/*删除某一行某一列*/}}</script></body></html>

  

这篇关于js动态控制表单表格的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1076075

相关文章

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

利用Python开发Markdown表格结构转换为Excel工具

《利用Python开发Markdown表格结构转换为Excel工具》在数据管理和文档编写过程中,我们经常使用Markdown来记录表格数据,但它没有Excel使用方便,所以本文将使用Python编写一... 目录1.完整代码2. 项目概述3. 代码解析3.1 依赖库3.2 GUI 设计3.3 解析 Mark

Python实现自动化表单填写功能

《Python实现自动化表单填写功能》在Python中,自动化表单填写可以通过多种库和工具实现,本文将详细介绍常用的自动化表单处理工具,并对它们进行横向比较,可根据需求选择合适的工具,感兴趣的小伙伴跟... 目录1. Selenium简介适用场景示例代码优点缺点2. Playwright简介适用场景示例代码

Java利用poi实现word表格转excel

《Java利用poi实现word表格转excel》这篇文章主要为大家详细介绍了Java如何利用poi实现word表格转excel,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 一、每行对象类需要针对不同的表格进行对应的创建。package org.example.wordToEx

最新Spring Security实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)

《最新SpringSecurity实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)》本章节介绍了如何通过SpringSecurity实现从配置自定义登录页面、表单登录处理逻辑的配置,并简单模拟... 目录前言改造准备开始登录页改造自定义用户名密码登陆成功失败跳转问题自定义登出前后端分离适配方案结语前言

使用EasyExcel实现简单的Excel表格解析操作

《使用EasyExcel实现简单的Excel表格解析操作》:本文主要介绍如何使用EasyExcel完成简单的表格解析操作,同时实现了大量数据情况下数据的分次批量入库,并记录每条数据入库的状态,感兴... 目录前言固定模板及表数据格式的解析实现Excel模板内容对应的实体类实现AnalysisEventLis

使用Python实现表格字段智能去重

《使用Python实现表格字段智能去重》在数据分析和处理过程中,数据清洗是一个至关重要的步骤,其中字段去重是一个常见且关键的任务,下面我们看看如何使用Python进行表格字段智能去重吧... 目录一、引言二、数据重复问题的常见场景与影响三、python在数据清洗中的优势四、基于Python的表格字段智能去重

Gin框架中的GET和POST表单处理的实现

《Gin框架中的GET和POST表单处理的实现》Gin框架提供了简单而强大的机制来处理GET和POST表单提交的数据,通过c.Query、c.PostForm、c.Bind和c.Request.For... 目录一、GET表单处理二、POST表单处理1. 使用c.PostForm获取表单字段:2. 绑定到结

javaScript在表单提交时获取表单数据的示例代码

《javaScript在表单提交时获取表单数据的示例代码》本文介绍了五种在JavaScript中获取表单数据的方法:使用FormData对象、手动提取表单数据、使用querySelector获取单个字... 方法 1:使用 FormData 对象FormData 是一个方便的内置对象,用于获取表单中的键值

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服