<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="mytabletest.css" type="text/css">
    <script language="javascript" type="text/javascript">
    function $(id) {  
        return document.getElementById(id);
    }
    function addHero() {  
        var z;  
        var i=$("ph").value;  
        for (var j=1;j<$("mytable").rows.length;j++)   {
            if(parseInt(i)>=parseInt($("mytable").rows[j].cells[0].getElementsByTagName("input")[0].value))    
            {
                z=j;
            }                  
        }  
        var tableRow=$("mytable").insertRow(z+1);
        var Cell_0=tableRow.insertCell(0);
        Cell_0.innerHTML='<input value="'+$("ph").value+'"  readonly="true"/>';
        Cell_0.className="s1";
        var Cell_1=tableRow.insertCell(1);
        Cell_1.innerHTML='<input value="'+$("xm").value+'"  readonly="true"/>';
        Cell_1.className="s2";
        var Cell_2=tableRow.insertCell(2);
        Cell_2.innerHTML='<input value="'+$("ch").value+'"  readonly="true"/>';
        Cell_2.className="s3";
        var Cell_3=tableRow.insertCell(3);
        Cell_3.innerHTML="<a href='#' onclick='Del(this.parentNode,this.parentNode.parentNode.rowIndex)'>删除</a>";
        Cell_3.className="s4";
        var Cell_4=tableRow.insertCell(4);
        Cell_4.innerHTML="<a href='#' onclick='edit(this.parentNode.parentNode)' class='edit'>修改</a>";
        Cell_4.className="s5";
    }

function Del(obj,val) {  
        var a=window.confirm("您确定要删除吗？");  
        if(a)  {
            $("mytable").deleteRow(val);
        }  else  {
            window.alert("未删除！");
        }
    }
    
    function edit(obj) {
        var inp = obj.getElementsByTagName("input");
        for (var i=0,len=inp.length;i<len;i++)
        {
            inp[i].readOnly=false;
        }
    }
    </script>
    <link rel="stylesheet" href="/csshide1.css"/>
<style></style >
<link rel="stylesheet" href="/abprule.css"/>
<style></style  >
<style></style>
<script type="text/javascript">window.onerror=function(){return true;}</script></head>
    <body>
    <h1>梁山英雄排行榜</h1>
    <table id="mytable" cellspacing="0px" border="3" bordercolor="red">
        <tr>
            <td class="s_top">排行</td>
            <td class="s_top">姓名</td>
            <td class="s_top">绰号</td>
            <td class="s_top" colspan="2">操作</td>
        </tr>
        <tr>
            <td class="s1"><input value="1" readonly="true"/></td>
            <td class="s2"><input value="宋江" readonly="true"/></td>
            <td class="s3"><input value="呼保义" readonly="true"/></td>
            <td class="s4"><a href="#" onclick='Del(this.parentNode,this.parentNode.parentNode.rowIndex)'>删除</a></td>
            <td class="s5"><a href="#" onclick='edit(this.parentNode.parentNode)'>修改</a></td>
        </tr>
        <tr>
            <td class="s1"><input value="2" readonly="true"/></td>
            <td class="s2"><input value="卢俊义" readonly="true"/></td>
            <td class="s3"><input value="玉麒麟" readonly="true"/></td>
            <td class="s4"><a href="#" onclick='Del(this.parentNode,this.parentNode.parentNode.rowIndex)'>删除</a></td>
            <td class="s5"><a href="#" onclick='edit(this.parentNode.parentNode)'>修改</a></td>
        </tr>
        <tr>
            <td class="s1"><input value="3" readonly="true"/></td>
            <td class="s2"><input value="吴用" readonly="true"/></td>
            <td class="s3"><input value="智多星" readonly="true"/></td>
            <td class="s4"><a href="#" onclick='Del(this.parentNode,this.parentNode.parentNode.rowIndex)'>删除</a></td>
            <td class="s5"><a href="#" onclick='edit(this.parentNode.parentNode)'>修改</a></td>
        </tr>
    </table>

<span class="span1">排行</span><input id="ph" type="text"/>
    <br>
    <span class="span1">姓名</span><input id="xm" type="text"/>
    <br>
    <span class="span1">绰号</span><input id="ch" type="text"/>
    <br>
    <input class="but" type="button" value="添加英雄" onclick="addHero()"/>

</body>
</html>

JS实现表格的增删改的更多相关文章

  1. 【原生】js实现表格的增删改查

    说在前面的,写给小白白的,大神请绕道~ 今天用原生js写一下动态表格的增删改查,主要是熟悉一下js的DOM操作. 首先,做一个表格,用来显示提交的数据,如图下: 此处,我添加了编号.姓名.密码.生日. ...

  2. js实现表格的增删改查

    这份代码实现了对表格的增加,删除,更改,查询. 点击一次添加按钮,表格会增加一行. 点击重置按钮,输入框的内容会被清空. 添加一行后,最后两格为更改和删除.点击更改,原有内容会各自显示在一个输入框内, ...

  3. jQuery EasyUI/TopJUI实现数据表格的增删改查功能（不写js,纯HTML实现!!!）

    jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码 <table id="configEdatagrid&q ...

  4. EasyUI-在行内进行表格的增删改操作

    第一篇笔记中记录了如何实现表格的增删改,那个是点击之后跳出来一个对话框然后进行的,这里是在表格本身上进行的操作,也很简单,但是这里发现一个版本问题,也可以说是兼容性问题. 1.首先我们看引用的js和c ...

  5. 用AngularJS实现对表格的增删改查（仅限前端）

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. easyui学习笔记2—在行内进行表格的增删改操作

    第一篇笔记中记录了如何实现表格的增删改,那个是点击之后跳出来一个对话框然后进行的,这里是在表格本身上进行的操作,也很简单,但是这里发现一个版本问题,也可以说是兼容性问题. 1.首先我们看引用的js和c ...

  7. SQL server 创建 修改表格 及表格基本增删改查 及 高级查询 及 (数学、字符串、日期时间)函数[转]

    SQL server 创建 修改表格 及表格基本增删改查 及 高级查询 及 (数学.字符串.日期时间)函数   --创建表格 create table aa ( UserName varchar(50 ...

  8. 基于AT UI实现表格的增删改查遇到的坑

    基于AT UI实现表格的增删改查遇到的坑 坑一.表格数据加载的渲染报错 报错:Error in render: "TypeError: Cannot read property 'isChe ...

  9. 【基础篇】js对本地文件增删改查

    [基础篇] js对本地文件增删改查--增 js对本地文件增删改查--删 js对本地文件增删改查--改 js对本地文件增删改查--查

随机推荐

  1. ECMAScript 6教程 (三) Class和Module（类和模块）

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出 原文连接,博客地址为 http://www.cnblogs.com/jasonnode/ .该系列课程是 ...

  2. wex5 教程 之 图文讲解 可观察对象的集群应用与绑定技术

    一 前言: wex5官方教程里,开篇即以一个input输入,output即时输出的例子,为我们展现了一个概念:可观察对象.在以后我的项目开发中,将大量运用可观察对象. 那么,问题来了: 1. 可观察对 ...

  3. iOS9适配 之 关于info.plist 第三方登录 添加URL Schemes白名单

    近期苹果公司iOS 9系统策略更新,限制了http协议的访问,此外应用需要在“Info.plist”中将要使用的URL Schemes列为白名单,才可正常检查其他应用是否安装. 受此影响,当你的应用在 ...

  4. 1350. Primary Arithmetic

    Children are taught to add multi-digit numbers from right-to-left one digit at a time.  Many find th ...

  5. lievent源码分析：evbuffer

    struct evbuffer定义在evbuffer-internal.h文件中. evbuffer结构内部保存一个以evbuffer-chain结构为节点的链表,evbuffer内部有两个分别指向首 ...

  6. iotop命令

    简介: iotop – simple top-like I/O monitor iotop是一个用来监视磁盘I/O使用状况的 top 类工具,可监测到哪一个程序使用的磁盘IO的信息(requires ...

  7. [问题2014S02] 解答

    [问题2014S02] 解答  首先注意到: 两个实系数多项式 \(f(x),g(x)\) 互素当且仅当 \(f(x),g(x)\) 在复数域 \(\mathbb{C}\) 上没有共公根, 当且仅当结 ...

  8. Analyzer报表结果行

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  9. HDU 5795 A Simple Nim（简单Nim）

    p.MsoNormal { margin: 0pt; margin-bottom: .0001pt; text-align: justify; font-family: Calibri; font-s ...

  10. C++11带来的优雅语法

    C++11带来的优雅语法 自动类型推导 auto auto的自动类型推导,用于从初始化表达式中推断出变量的数据类型.通过auto的自动类型推导,可以简化我们的编程工作; auto是在编译时对变量进行了 ...