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();
    }
     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 ></ td >
         </ tr >
     </ table >
     
</ BODY >
</ HTML >

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

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

你可能感兴趣的:(js中实现table的插入、修改、删除)