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常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

Node.js学习记录(二)

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

HTML提交表单给python

python 代码 from flask import Flask, request, render_template, redirect, url_forapp = Flask(__name__)@app.route('/')def form():# 渲染表单页面return render_template('./index.html')@app.route('/submit_form',

Prompt - 将图片的表格转换成Markdown

Prompt - 将图片的表格转换成Markdown 0. 引言1. 提示词2. 原始版本 0. 引言 最近尝试将图片中的表格转换成Markdown格式,需要不断条件和优化提示词。记录一下调整好的提示词,以后在继续优化迭代。 1. 提示词 英文版本: You are an AI assistant tasked with extracting the content of

form表单提交编码的问题

浏览器在form提交后,会生成一个HTTP的头部信息"content-type",标准规定其形式为Content-type: application/x-www-form-urlencoded; charset=UTF-8        那么我们如果需要修改编码,不使用默认的,那么可以如下这样操作修改编码,来满足需求: hmtl代码:   <meta http-equiv="Conte

使用JS/Jquery获得父窗口的几个方法(笔记)

<pre name="code" class="javascript">取父窗口的元素方法:$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent.parent.document);如题: $(selector, window.top.document);//获得顶级窗口里面的元素 $(

js异步提交form表单的解决方案

1.定义异步提交表单的方法 (通用方法) /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span style="color:#ff0000;"><strong>@注意 后台接收参数要解码否则中文会导致乱码 如:URLDecoder.decode(param,"UTF-8")</strong></span>

前端form表单+ifarme方式实现大文件下载

// main.jsimport Vue from 'vue';import App from './App.vue';import { downloadTokenFile } from '@/path/to/your/function'; // 替换为您的函数路径// 将 downloadTokenFile 添加到 Vue 原型上Vue.prototype.$downloadTokenF