js添加删除行和双击变文本框

作者：x囚徒已然初年 | 来源：互联网 | 2023-01-26 18:27

代码<!DOCTYPEhtmlPUBLIC-W3CDTDXHTML1.0TransitionalENhttp:www

代码

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < title > js添加删除行和双击变文本框 title >
     < style type ="text/css" >
    * {
        font-size : 12px ;
     }
    #myTable {
        background : #D5D5D5 ;
        color : #333333 ;
     }

    #myTable tr {
        background : #F7F7F7 ;
     }
    #myTable tr th {
        height : 20px ;
        padding : 5px ;
     }
    #myTable tr td {
        padding : 5px ;
     }
     style >
     < script type ="text/Javascript" >
     function $(obj){
         return document.getElementById(obj);
    }

     var num = 0 ;
     function row(id){
         // 构造函数
         this .id = $(id);
    }
    row.prototype = {
         // 插入行
        insert: function (){
            num = num + 1 ;
             var newTr = this .id.insertRow( - 1 );
             var td_1 = newTr.insertCell( 0 );
             var td_2 = newTr.insertCell( 1 );
             var td_3 = newTr.insertCell( 2 );
            td_1.innerHTML = num;
            td_2.innerHTML = " 脚本之家 www.jb51.net " ;
            td_3.innerHTML = " " ;
        },
         // 删除行
        del: function (obj){
             var i = obj.parentNode.parentNode.rowIndex;
             this .id.deleteRow(i);
        }
    }

     function addRow(){
         var row2 = new row( " myTable " );
        row2.insert();
    }

     function delRow(obj){
         var row1 = new row( " myTable " );
        row1.del(obj);
    }

     var inputItem; // 输入框句柄
     var activeItem; // 保存正在编辑的单元格

     // 转成文本
     function changeToText(obj){
         if ( obj && inputItem ) {
             // 如果存在正在编辑的单元格，则取消编辑状态，并将编辑的数据保存起来
             var str = " " ;
             if (inputItem.value != "" )
                str = inputItem.value;
            obj.innerText = str;
        }
    }

     // 转成编辑
     function changeToEdit(obj){
          if ( ! inputItem ) {
              inputItem = document.createElement( ' input ' );
              inputItem.type = ' text ' ;
              inputItem.style.width = ' 100% ' ;
         }
         // inputItem.style.display = '';
         inputItem.value = obj.innerText; // 将该单元格的数据文本读到控件上
         obj.innerHTML = '' ; // 清空单元格的数据
         obj.appendChild(inputItem);
         inputItem.focus();
         activeItem = obj;
    }


     // 双击时文本变成文本框
    document.ondblclick = function (){
         if (event.srcElement.tagName.toLowerCase() == " td " ){
             if ( ! inputItem){
                inputItem = document.createElement( " input " );
                inputItem.type = " text " ;
                inputItem.style.width = " 100% " ;
            }
            changeToText();
            changeToEdit(event.srcElement);
        } else {
            event.returnValue = false ;
             return false ;
        }
    }

     // 单击时文本框变成文本
    document.onclick = function (){
         if (event.srcElement.parentNode == activeItem || event.srcElement == activeItem)
             return ;
         else
            changeToText(activeItem);
    }
     script >
head >
< body >
< input type ="button" onclick ="addRow()" value ="插入一行" />
< table id ="myTable" border ="0" cellpadding ="0" cellspacing ="1" >
< tr >< th > 编号 th >< th > 姓名 th >< th > 操作 th > tr >
table >
body >
html >

【转】

推荐阅读

function
单击时动态创建
元素 - Dynamically create
element on click

Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]

蜡笔小新 2023-12-12 15:59:36
string
求解hdu 1003 java题目的动态规划优化方法

本文讨论了如何优化解决hdu 1003 java题目的动态规划方法，通过分析加法规则和最大和的性质，提出了一种优化的思路。具体方法是，当从1加到n为负时，即sum(1,n)sum(n,s)，可以继续加法计算。同时，还考虑了两种特殊情况：都是负数的情况和有0的情况。最后，通过使用Scanner类来获取输入数据。 ... [详细]

蜡笔小新 2023-12-14 13:11:00
default
VScode格式化文档换行或不换行的设置方法

本文介绍了在VScode中设置格式化文档换行或不换行的方法，包括使用插件和修改settings.json文件的内容。详细步骤为：找到settings.json文件，将其中的代码替换为指定的代码。 ... [详细]

蜡笔小新 2023-12-14 17:15:38
default
九度OnlineJudge之1002：Grading问题的解决方法

本文介绍了九度OnlineJudge中的1002题目“Grading”的解决方法。该题目要求设计一个公平的评分过程，将每个考题分配给3个独立的专家，如果他们的评分不一致，则需要请一位裁判做出最终决定。文章详细描述了评分规则，并给出了解决该问题的程序。 ... [详细]

蜡笔小新 2023-12-14 13:00:09
数组
C#之数据集：DataSet对象的使用及相关方法详解

本文介绍了C#中数据集DataSet对象的使用及相关方法详解，包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成，以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读，读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]

蜡笔小新 2023-12-14 12:09:13
数组
OC学习笔记之@property和@synthesize

本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]

蜡笔小新 2023-12-14 12:05:06
string
知识图谱——机器大脑中的知识库

本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]

蜡笔小新 2023-12-14 10:06:19
string
关于cuowu类的错误提示和使用AdjustmentListener的问题

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

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

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

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

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

蜡笔小新 2023-12-13 19:12:25
string
后台获取视图对应的字符串

1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注：不会执行对应的ac ... [详细]

蜡笔小新 2023-12-13 18:03:01
match
《数据结构》学习笔记3——串匹配算法性能评估

本文主要讨论串匹配算法的性能评估，包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库，可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n)，通过随机取出长度为m的子串作为模式P，在文本T中进行匹配，统计平均复杂度。对于成功和失败的匹配分别进行测试，分析其平均复杂度。详情请参考相关学习资源。 ... [详细]

蜡笔小新 2023-12-13 16:16:05
request
springmvc学习笔记(十)：控制器业务方法中通过注解实现封装Javabean接收表单提交的数据

本文介绍了在springmvc学习笔记系列的第十篇中，控制器的业务方法中如何通过注解实现封装Javabean来接收表单提交的数据。同时还讨论了当有多个注册表单且字段完全相同时，如何将其交给同一个控制器处理。 ... [详细]

蜡笔小新 2023-12-13 12:16:34
数组
猜字母游戏

猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细]

蜡笔小新 2023-12-13 12:04:03
数组
深入理解CSS中的margin属性及其应用场景

本文主要介绍了CSS中的margin属性及其应用场景，包括垂直外边距合并、padding的使用时机、行内替换元素与费替换元素的区别、margin的基线、盒子的物理大小、显示大小、逻辑大小等知识点。通过深入理解这些概念，读者可以更好地掌握margin的用法和原理。同时，文中提供了一些相关的文档和规范供读者参考。 ... [详细]

蜡笔小新 2023-12-12 18:01:10

x囚徒已然初年

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

Tags | 热门标签

RankList | 热门文章