JS实现表格的增删改

时间:2023-03-09 13:22:46
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>