JS实现表格的增删改

<!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>

时间: 2024-10-27 06:41:37

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

用js实现表格的增删改

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compat

表格的增删改查

这周,复习了JS的操作,并用更简捷的代码,实现了表格的增删改查!   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd">   <html>   <head>   <meta charset="utf-8">   <title><

easyui学习笔记2—在行内进行表格的增删改操作【转载】

第一篇笔记中记录了如何实现表格的增删改,那个是点击之后跳出来一个对话框然后进行的,这里是在表格本身上进行的操作,也很简单,但是这里发现一个版本问题,也可以说是兼容性问题. 1.首先我们看引用的js和css代码 <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/default/easyui.css" /> <link rel="stylesheet" href=&quo

表格的增删改操作

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>表格的增删改操作</title> <script type="text/javascript"> function createTable() { var body = document.getElementById(&quo

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

基于AT UI实现表格的增删改查遇到的坑 坑一.表格数据加载的渲染报错 报错:Error in render: "TypeError: Cannot read property 'isChecked' of undefined" 错误原因:将数据加载进data中后,数据进入表格组件at-table中报错,为AT UI内部问题. 解决方法:数据改变后,at-table组件强制刷新.刷新方法:https://www.cnblogs.com/s313139232/p/9176820.html

js_表格的增删改

学到后面发现前面的内容都不是很巩固了. 知道自己的不足之后,最近在复习一些学过的知识. 用js做了一个还不是完美表格增删改.(只适合列数比较少的表格) 贴上代码: html: <div class="goods_info"> <table class="goods_ctg"> <caption class="ctg_caption"> 商品类别信息 </caption> <thead>

冒泡排序和对表格的增删改减

冒泡排序代码 效果图:  隐含的逻辑描述(假设数组有n项): 1, 需要进行n-1趟的"冒泡"比较过程.2, 每一趟的比较都前一趟少比一次,第一趟需要比较n-1次3, 每趟比较,都是从数组的开头(0)开始,跟紧挨的元素比较,并进行交换(需要的时候) 1 // JavaScript Document 2 var but = null,//定义变量 3 n = 0, 4 dd = null, 5 thlength = null, 6 tab = null; 7 window.onload=

JS+JavaBean判断管理员增删改的操作权限

目标:用户分管理员和普通用户2种,都可以登陆,但是管理员才可以执行增删改的权限,普通用户可以看,但是执行的时候提示权限不足 帖代码片段:我只会这一种,在JSP页面判断 省略得权限数值方法: <% String username = (String)session.getAttribute("username"); UserService userService=new UserServiceImpl(); System.out.println("username====

js基础(dom增删改)

新增节点: /* * document.createElement() * 可以用于创建一个元素节点对象, * 它需要一个标签名作为参数,将会根据该标签名创建元素节点对象, * 并将创建好的对象作为返回值返回 */ var li = document.createElement("li"); /* * document.createTextNode() * 可以用来创建一个文本节点对象 * 需要一个文本内容作为参数,将会根据该内容创建文本节点,并将新的节点返回 */ var gzTex