随笔 - 154  文章 - 60  trackbacks - 0
<2007年11月>
日一二三四五六
28293031123
45678910
11121314151617
18192021222324
2526272829301
2345678

声明：

该blog是为了收集资料，认识朋友，学习、提高技术，所以本blog的内容除非声明，否则一律为转载！！

感谢那些公开自己技术成果的高人们！！！

支持开源，尊重他人的劳动！！

常用链接

留言簿(3)

随笔分类(148)

随笔档案(143)

收藏夹(2)

其他

学习（技术）

观察思考（非技术）

搜索

  •  

最新评论

阅读排行榜

评论排行榜

js table 操作-----实现table的插入、修改、删除
上边是一个表，下边是一些录入控件text ,select
实现了：插入 ，删除，修改，读取，验证类型唯一性(每种类型只能输入一个记录)
<!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("<input type='hidden' name='hiddenHead' value='"+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("<input type='hidden' name='hiddenParam"+(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>参数1</td>
            <td>参数二</td>
            <td>参数三</td>
        </tr>
    </table>
    </div>
    <table>
        <tr>
            <td>
                <select name="type" onchange="reset()">
                    <option value="typeA">类型A</option>
                    <option value="typeB">类型B</option>
                </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><!--<input type="button" onclick="test()" value="test"/>--></td>
        </tr>
    </table>
    <!--
<td><input type="button" onclick="test2()" value="test2"/></td>
<td><input type="button" onclick="alert(selectedRowIndex)" value="test2"/></td>
-->
</BODY>
</HTML>
posted on 2007-11-29 16:53 lk 阅读(1079) 评论(0)  编辑  收藏 所属分类: ajax&js

只有注册用户登录后才能发表评论。
网站导航:
 
Copyright ©2024 lk Powered by: 博客园 模板提供：沪江博客