DANCE WITH JAVA

开发出高质量的系统

常用链接

统计

积分与排名

好友之家

最新评论

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("<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();
    }