js中实现table的插入、修改、删除 -凯发k8网页登录

开发出高质量的系统

常用链接

统计

积分与排名

好友之家

最新评论

js中实现table的插入、修改、删除

进来工作慢慢远离web、远离js，看着自己这些年来学习过程中写过的上百个的js demo，感觉还是把它们发上来吧。虽然它们不够完善，但对于js初学者还是比较有用的。整理一下慢慢发上来，算是留念吧。

好了，第一从table开始吧
就是上边是一个表，下边是一些录入控件text ,select
实现了：插入 ，删除，修改，读取，验证类型唯一性(每种类型只能输入一个记录)
文中的内容直接存成html就能看到效果，所以我就不贴图片了。
doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> new document title>
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
head>
<script>
    var flg=false;
    var selectedcolor = "#99cccc";
    var initcolor = "#ffff99";
    var selectedrowindex = "";
    var editobj;
    function add(){
        var cell;
        var textnode;
        // add head
        var type = document.getelementsbyname("type")[0];
        head = type.options[type.selectedindex].text;
        //check exist
        var hiddenheads = document.getelementsbyname("hiddenhead");
        for(i=0;i<hiddenheads.length;i){
            if(hiddenheads[i].value == type.value){
                alert("这个类型的记录已经存在");
                return ;
            }
        }
        //add row
        tbl = document.getelementbyid("paramtbl");
        rowslen = tbl.rows.length;
        row = tbl.insertrow(rowslen);        
        
        //create head tag
        textnode = document.createtextnode(head);        
        cell = row.insertcell(0)
        cell.setattribute("hight","22");
        cell.appendchild(textnode);        
        row.appendchild(cell);        
        //add param tag
        for(i=1;i<4;i){            
            paramvalue = document.getelementsbyname("param"i)[0].value;
            textnode = document.createtextnode(paramvalue);            
            cell = row.insertcell(i)
            cell.setattribute("hight","22");
            cell.appendchild(textnode);
            row.appendchild(cell);             
        }
        //add head value
        hiddenhead = document.createelement(""type.value"'/>");        
        cell = row.insertcell(4)        
        cell.setattribute("hight","22");
        cell.appendchild(hiddenhead);
        row.appendchild(cell);
        //add param value
        for(i=5;i<8;i){
            paramvalue = document.getelementsbyname("param"(i-4))[0].value;
            hidden = document.createelement(""(i-4)"' value='"paramvalue"'/>");
            cell = row.insertcell(i)
            cell.style.display='none';
            cell.appendchild(hidden);
            row.appendchild(cell);   
        }

        row.onclick=function(){rowclick(this);};
        row.bgcolor = initcolor;
        init();
    }
    function edit(){
        tbl = document.getelementbyid("paramtbl");
        if(selectedrowindex==""){
            alert("please select a row");
            return ;
        }
        for(i=1;i<4;i){
            paramobj = document.getelementsbyname("param"i)[0];
            hiddenobj = document.getelementsbyname("hiddenparam"i)[selectedrowindex-1];
            hiddenobj.value = paramobj.value;
            editobj.cells[i].innertext=paramobj.value;
        }
        init();
    }
    function del(){
        tbl = document.getelementbyid("paramtbl");
        tbl.deleterow(selectedrowindex);
        selectedrowindex = "";
        init();

    }
    function rowclick(obj){
        tbl = document.getelementbyid("paramtbl");
        if(selectedrowindex != ""){
            tbl.rows[selectedrowindex].bgcolor = initcolor;
        }
        selectedrowindex = obj.rowindex;
        obj.bgcolor = selectedcolor;
        //reset select 
        var type = document.getelementsbyname("type")[0];
        var hiddenhead = document.getelementsbyname("hiddenhead")[selectedrowindex-1];        
        var opts = type.options;
        if(flg){
        alert(selectedrowindex-1);
        alert(hiddenhead);
        alert(hiddenhead.value);
        }
        for(i=0;i<opts.length;i){    
            if(opts[i].value == hiddenhead.value ){
                opts[i].selected = true;
            }
        }
        //copy param value
        for(i=1;i<4;i){
            paramobj = document.getelementsbyname("param"i)[0];
            hiddenobj = document.getelementsbyname("hiddenparam"i)[selectedrowindex-1];            
            paramobj.value = hiddenobj.value;
            //alert(hiddenobj.value);
        }
        editobj=obj;
    }
    function init(){
        for(i=1;i<4;i){            
            param = document.getelementsbyname("param"i)[0];
            param.value="";
        }
        var type = document.getelementsbyname("type")[0];
        type.options[0].selected=true;
    }
    function test(){
        
        hiddenobjs = document.getelementsbyname("hiddenparam1")
        for(i=0;i<hiddenobjs.length;i){
            alert(hiddenobjs[i].value);
        }
        var hiddenheads = document.getelementsbyname("hiddenhead");    
        for(i=0;i<hiddenheads.length;i){
            alert(hiddenheads[i].value);
        }
    }
    function test2(){
        if(flg){
            flg=false;
        }else{
            flg=true;
        }
    }
    function reset(){
        tbl = document.getelementbyid("paramtbl");
        if(selectedrowindex!=""){
            tbl.rows[selectedrowindex].bgcolor = initcolor;
            selectedrowindex="";
        }
        for(i=1;i<4;i){            
            param = document.getelementsbyname("param"i)[0];
            param.value="";
        }
    }

script>
<body>
    <div style="height:132px; width:100%; overflow-x:auto; overflow-y:auto; background-color:#ffff99;" >
    <table id="paramtbl" width="100%">
        <tr>
            <td>类型td>
            <td>参数1td>
            <td>参数二td>
            <td>参数三td>
        tr>
    table>
    div>
    <table>
        <tr>
            <td>
                <select name="type" onchange="reset()">
                    <option value="typea">类型aoption>
                    <option value="typeb">类型boption>
                select>
            td>
            <td>
                <input type="text" name="param1"/>
            td>
            <td>
                <input type="text" name="param2"/>
            td>
            <td>
                <input type="text" name="param3"/>
            td>
        tr>
        <tr>
            <td><input type="button" onclick="add()" value="add"/>td>
            <td><input type="button" onclick="edit()" value="edit"/>td>
            <td><input type="button" onclick="del()" value="del"/>td>
            <td>td>
        tr>
    table>
    
body>
html>

posted on 2007-09-10 15:24 dreamstone 阅读(10207) 评论(4)  编辑  收藏 所属分类: 片段 、脚本语言javascript

# re: js中实现table的插入、修改、删除 2008-10-25 00:39

不错哦  回复     

# re: js中实现table的插入、修改、删除 2010-08-10 10:44

ok  回复     

# re: js中实现table的插入、修改、删除 2011-09-07 18:30

  回复     

# re: js中实现table的插入、修改、删除 2011-09-07 18:30

  回复     


只有注册用户后才能发表评论。
网站导航:
              
 
网站地图