js动态添加表格和删除表格

JavaScript Dom 案例-动态表格的添加和删除 阅读详情
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

<script language="JavaScript">
    window.onload = function () {
        strYYYY = document.form1.YYYY.outerHTML;
        strMM = document.form1.MM.outerHTML;
        strDD = document.form1.DD.outerHTML;
        MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

//先给年下拉框赋内容
        var y = new Date().getFullYear();
        var str = strYYYY.substring(0, strYYYY.length - 9);
        for (var i = (y - 30); i < (y + 30); i++) //以今年为准,前30年,后30年
        {
            str += "<option value='" + i + "'> " + i + "</option>\r\n";
        }
        document.form1.YYYY.outerHTML = str + "</select>";

//赋月份的下拉框
        var str = strMM.substring(0, strMM.length - 9);
        for (var i = 1; i < 13; i++) {
            str += "<option value='" + i + "'> " + i + "</option>\r\n";
        }
        document.form1.MM.outerHTML = str + "</select>";

        document.form1.YYYY.value = y;
        document.form1.MM.value = new Date().getMonth() + 1;
        var n = MonHead[new Date().getMonth()];
        if (new Date().getMonth() == 1 && IsPinYear(YYYYvalue)) n++;
        writeDay(n); //赋日期下拉框
        document.form1.DD.value = new Date().getDate();
    }
    function YYYYMM(str) //年发生变化时日期发生变化(主要是判断闰平年)
    {
        var MMvalue = document.form1.MM.options[document.form1.MM.selectedIndex].value;
        if (MMvalue == "") {
            DD.outerHTML = strDD;
            return;
        }
        var n = MonHead[MMvalue - 1];
        if (MMvalue == 2 && IsPinYear(str)) n++;
        writeDay(n)
    }
    function MMDD(str) //月发生变化时日期联动
    {
        var YYYYvalue = document.form1.YYYY.options[document.form1.YYYY.selectedIndex].value;
        if (str == "") {
            DD.outerHTML = strDD;
            return;
        }
        var n = MonHead[str - 1];
        if (str == 2 && IsPinYear(YYYYvalue)) n++;
        writeDay(n)
    }
    function writeDay(n) //据条件写日期的下拉框
    {
        var s = strDD.substring(0, strDD.length - 9);
        for (var i = 1; i < (n + 1); i++)
            s += "<option value='" + i + "'> " + i + "</option>\r\n";
        document.form1.DD.outerHTML = s + "</select>";
    }
    function IsPinYear(year)//判断是否闰平年
    {
        return (0 == year % 4 && (year % 100 != 0 || year % 400 == 0))
    }
    var i=1;
    function add() {
       // document.write('<tr>');
        var sNum = '100'+i;
        var sName=document.getElementById('user').value;
        var year=document.getElementById('year').value;
        var month=document.getElementById('month').value;
        var day=document.getElementById('day').value;
        if(document.getElementById('male').checked){
            sex='女';
        }else{
            sex='男';
        }
       // var sex=document.getElementsByName('sex')[0].value;
        var _table=document.getElementById('tb');
        //console.log(_table);
        var tr1=document.createElement('tr');
        tr1.id=i;
        _table.appendChild(tr1)
        //第一个单元格
        var td1=document.createElement('td');
        td1.appendChild(document.createTextNode(sNum));
        //第二个单元格
        var td2=document.createElement('td');
        td2.appendChild(document.createTextNode(sName));
        //第三个单元格
        var td3=document.createElement('td');
        td3.appendChild(document.createTextNode(year+'年'+month+'月'+day+'日'));
        //第四个单元格
        var td4=document.createElement('td');
        td4.appendChild(document.createTextNode(sex));
        var td5=document.createElement('td');
        var oBtn=document.createElement('button');
        oBtn.appendChild(document.createTextNode('删除'))

        oBtn.id=i;
        //console.log(oBtn.id);
        oBtn.onclick=function(){
            console.log(tr1.id)
           del(tr1.id);

        }

        td5.appendChild(oBtn);
        tr1.appendChild(td1);
        tr1.appendChild(td2);
        tr1.appendChild(td3);
        tr1.appendChild(td4);
        tr1.appendChild(td5)
        i++;
    }

    function del(obj){
        var b=document.getElementById(obj);
        console.log(obj)
        b.remove();
    }
    //--></script>
</head>
<body>

<fieldset>
    <legend>添加操作</legend>
    <lable>姓名:</lable>
    <input id="user" type="text" name="username" ><br>
    <lable>出生年月日:</lable>
    <form name=form1>
        <select id="year" name=YYYY onchange="YYYYMM(this.value)">
            <option  value="">年</option>
        </select>
        <select id="month" name=MM onchange="MMDD(this.value)">
            <option value="">月</option>
        </select>
        <select id="day" name=DD>
            <option value="">日</option>
        </select></form>
    <br>
    <lable>性别:</lable>
    <input type="radio" value="男" name="sex" checked="checked">男
    <input type="radio" name='sex' value="女" id="male">女<br>
    <button onclick="add()">添加数据</button>
    <hr style="margin-top: 70px">
    <br><br><br><br>
    <table border="1px" id="tb">
        <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>生日</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        </thead>
    </table>
</fieldset>
</body>
</html>
JavaScript动态操作表格教程:添加、删除与选择 本文还有配套的精品资源,点击获取 简介:本文介绍了如何使用JavaScript动态地添加、删除和选择表格元素,重点在于DOM操作的基础知识,以及确保代码在不同浏览器中(包括较旧版本)的兼容性。通过示例代码,展示了创建和修改HTML表格元素的过程,并讨论了兼容性处理,以适应如IE6等老式浏览器的需求。 1. 动态操作表格的基本概念与元素 在本章中,我们将探讨动态操... 阅读详情

相关推荐

js 操作表格动态添加和删除行

js 操作表格动态添加和删除行

js清空表格内容,或防止Ajax多次请求后端数据。

1.清除表格内容 循环删除tr,js代码如下: 2.防止Ajax多次查询 在查询之前定义一个变量,判断变量值控制是否查询:

清风思雨的博客 1878

js动态添加删除表格

js,javascript

原生js生成table表单

1.想要学习好javascript不能总是使用jquery,总是使用jquery会使以后的道路也来越窄 table .licl-table{ width:500px; height:350px; border: 1px solid #000000; border-collapse:collapse; } .licl-table th,td{

嫑忈嘦你的博客 2184

javascript实现动态添加删除表格行

NULL 博文链接:https://1148130696.iteye.com/blog/1726191

js动态绘制表格,实现动态绘制,添加 和删除

js动态的绘制表格很好的例子,包括如何动态的去添加 修改 和删除表格 以及遍历表格内容

js load()方法传递参数及获取参数

我们访问后台获取到的数据有的时候是[{"name":"value","sex":"value","age":"value"}] 而js的load()方法完整的是load("url",data,function(){}) 只需把访问后台访问的值var json = eval('(' + pat + ')');转换成对象, 在a.jsp中的js写到load(&quot

baseli的博客 2万+

ISE 14.7 MCS文件的生成--- Spartan3AN XC3S200AN

步骤一: Generate Programming File生成 .bit文件 步骤二: Tools——>iMPCAT 步骤三: iMPACT Flows——>双击“Create PROM File(PROM File Formatter)” 步骤四: Non-Volatile FPGA——>点击”Spartan 3AN“——>点击“绿色箭头”——>Spartan3AN(bits)——>选择“xc3s200an"——>点击”Add storage Device“—

qq_40039676的博客 2101

easyUI实现显示“未找到查询结果”以及在loadtable方法中传递参数

easyUI实现显示“未找到查询结果”以及在loadtable方法中传递参数 easyUI在查询未找到结果时,在页面中显示提示信息“未找到相关信息”效果的实现 1、先引入该部分代码 var myview = $.extend({},$.fn.datagrid.defaults.view,{ onAfterRender:function(target){ $.fn.datagr

bjlf_1989的博客 1135

Proxmox VE网络配置踩坑实录:从Web界面无法访问到完美修复的全过程

本文详细记录了Proxmox VE服务器Web界面无法访问的完整排查与修复过程。作者从基础网络连通性测试入手,逐步排查了服务状态、SSL证书、端口监听、防火墙规则及网关配置,最终定位并解决了问题。文章提供了系统性的故障排查思路和实用的修复命令,对管理Proxmox VE网络具有重要参考价值。

weixin_29231221的博客 890

潜行游戏设计:核心机制与关卡设计解析

潜行游戏作为动作游戏的重要分支,通过视觉遮蔽、声音传播和AI行为树等复杂系统,为玩家提供独特的策略体验。视觉隐蔽系统采用视野锥和光照值的双重判定,声学传播模型模拟距离衰减和材质穿透,而敌人AI行为树则包含巡逻、警戒和团队协作等状态节点。这些技术不仅提升了游戏的真实感和挑战性,还在《合金装备》《刺客信条》等经典作品中得到广泛应用。潜行游戏的关卡设计强调多路径拓扑结构和环境叙事元素,通过沙漏模型和动态难度调节,平衡自由度和开发成本。未来,基于ML的适应性AI和物理模拟的隐蔽系统将成为创新方向。

weixin_42497762的博客 182

JavaScript Dom 案例-动态表格的添加和删除(一)

案例知识点关键字: Document,Node,Element,innerHTML,onclick 基本代码如下,这是一个目前只有HTML和CSS的的页面效果: 代码如下: Title <table> <caption>信息表</ca...

ontheroad1024的博客 1337

从零构建腾讯滑块验证码破解引擎:逆向工程与实战对抗

本文深入解析腾讯滑块验证码(原天御验证码)的防护机制,包括环境感知层、行为分析层和验证决策层的核心技术。通过JSVMP虚拟机保护、轨迹验证算法和动态加密体系,腾讯验证码实现了高效的人机识别。文章还提供了安全研究实践指南,涵盖环境模拟和验证码识别方案,并探讨了防御对抗的演进趋势与合规研究建议。

rl6adventurer的博客 831

js动态实现表格添加和删除操作

运行效果如图(两种实现方案,被注释的是第一种实现方案) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> div{ te...

Distance的博客 5420

博图HMI多语言文本列表一键生成攻略:从Excel模板到TIA Portal的完整流程

本文详细介绍了如何利用Excel模板和TIA Portal API实现博图HMI多语言文本列表的一键生成。通过标准化Excel模板设计、解析TIA Portal的XML结构,并结合C#代码实现自动化导入,大幅提升多语言项目的开发效率。特别适用于需要支持多语言版本的自动化设备HMI界面开发。

weixin_26934905的博客 218

把 OData V4 服务真正发布出去:事务码 /IWFND/V4_ADMIN 在 SAP S/4HANA On-Premise 里的定位与用法

本文介绍了SAP S/4HANA中的事务码/IWFND/V4_ADMIN,这是SAP Gateway管理OData V4服务的关键工具。该事务码主要负责将后端注册的OData V4服务以服务组形式发布到前端,并维护系统别名路由、测试入口和日志跳转。与OData V2不同,V4采用服务组概念以支持跨服务导航,类似商场统一管理多个专柜。文章还通过实际案例说明,未发布服务组会导致BAS等工具无法发现OData V4服务,并提供了验证服务组状态的访问路径和ABAP示例代码。

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 208

用js动态实现表格的添加和删除

##直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit

you_very_brave的博客 770

第77步 时间序列建模实战:多因素预测 vol-2(以决策树回归为例)

第77步 时间序列建模实战:多因素预测 vol-2(以决策树回归为例)

Jet4505的博客 1008

如何使用JavaScript实现一个简单的动态表格,实现添加一行和删除一行表格(两种方法)

1方法一: 使用table的insertRow()方法插入一行,使用table.removeChild(tr)删除一行,具体的代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ text-align: c.

m0_64053511的博客 8989

【原创教程】AB上位机FactoryTalk View的使用教程

条形图主要的作用就是根据绑定的变量中数字大小的变化来反映到图形中,随着数字的增加填充的颜色不断上升或随着数字的减小填充的颜色不断下降。绘图功能中常用的功能主要是:数字输入,数字输出,字符输入,字符输出,各种类型的的按钮,条状图,各类控件,系统自带的图形库。颜色指的是根据PLC变量的变化来改变图形的颜色,可以绑定BOOL量来显示两种颜色,也可以绑定字节,字,双字等来显示多种颜色。打开软件后右键点击画面选项然后点击新建则新建出一个画面,画面画好后点击保存并更改标题后新建的画面则会出现在画面选项的文件夹下。

Qinmingyue13的博客 4681

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

js动态的添加删除表格的行和列

声明:本文摘自网络 js动态操作表格  function init(){       _table=document.getElementById("table");   _table.border="1px";   _table.width="800px";     for(var i=1;i    var row=document.createElem

5506

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

js如何实现动态的在表格中添加和删除行?(两种方法)

js如何实现动态的在表格中添加和删除行?(两种方法) 一、总结 1、table元素有属性和一些方法(js使用) 方法一:添加可通过在table的innerHTML属性中添加tr和td来实现 tab.innerHTML+='&lt;tr style="background: green"&gt;&lt;td&gt;新增01&lt;/td&gt;&lt;td&gt;新增02&lt;/td&gt...

weixin_34342992的博客 778

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

html 表格增加全选框,js动态添加表格,全选和删除

效果图: 代码:js动态添加表格数据_2.htmljs动态添加表格数据_2 使用insertRow和insertCell方法实现var mailArr = [{ "title": "一个c#问题", "name": "张三", "date": "2014-03-21" },{ "title": "一个javascript问题", "name": "李四", "date": "2014-03-21"...

weixin_39995297的博客 230
上一篇: 图片遮罩问题
下一篇: json数据的循环遍历
W_violet
博客等级 码龄8年 6粉丝 39原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值