js制作动态创建table行与修改等编辑表单功能特效

浏览数：30 / 时间：2015年06月09日

<script type="text/javascript">
//Create TR
var nName = new Array("Tony","Mika","Neo","Oi","Kim","Park","Mr Lee","Tasky","Saco","Novel");
var nSex = new Array("男性","女性","保密");
var i = 1;
function CreateTB(){
    var oTB = document.getElementById("TB");
    var oTR = oTB.insertRow(oTB.rows.length);
    var oTD1 = oTR.insertCell(0);
    oTD1.innerHTML = "<input type=‘checkbox‘ name=‘ck‘>";
    var oTD2 = oTR.insertCell(1);
    oTD2.innerHTML = "<div>" + nName[parseInt(Math.random()*10)] + "</div><center><input type=‘text‘ style=‘display:none; width:99%; height:22px; text-align:center;‘></center>";
    var oTD3 = oTR.insertCell(2);
    oTD3.innerHTML = "<div>" + parseInt(Math.random()*50+15) + "</div><center><select name=‘age‘ class=‘select‘ style=‘display:none;‘></select></center>";
    var oTD4 = oTR.insertCell(3);
    oTD4.innerHTML = "<div>" + nSex[parseInt(Math.random()*3)] + "</div><center><select name=‘sex‘ class=‘select‘ style=‘display:none;‘></select></center>";
    var oTD5 = oTR.insertCell(4);
    oTD5.innerHTML = "<input type=‘button‘ value=‘修改‘ onclick=\"edit(this,‘show‘)\"><input type=‘button‘ value=‘删除‘ onclick=‘del(this)‘>";
i++;
}
//EDIT TR
function edit(o,otype){
    var oTR=o.parentNode.parentNode;
    var oDiv1=oTR.cells[1].getElementsByTagName("div");
    var oDiv2=oTR.cells[2].getElementsByTagName("div");
    var oDiv3=oTR.cells[3].getElementsByTagName("div");
    var oInpt1=oTR.cells[1].getElementsByTagName("input");
    var oselect2=oTR.cells[2].getElementsByTagName("select");
    var oselect3=oTR.cells[3].getElementsByTagName("select");
    if (otype =="show"){
        o.value="确认";
        o.setAttribute("onclick","edit(this,‘hide‘)");
        //名字修改前
        oInpt1[0].value = oDiv1[0].childNodes[0].nodeValue;
        oInpt1[0].style.display = "block";
        oDiv1[0].style.display = "none";
        //年龄修改前
        oDiv2[0].style.display = "none";
        var iSage = parseInt(oDiv2[0].childNodes[0].nodeValue);
        oselect2[0].style.display = "block";
        if (oselect2[0].length == 0){
            for (var i=0; i<50; i++){
                oselect2[0].options.add(new Option(i+15,i+15)); 
            }
            oselect2[0].options[iSage-15].selected = true;
        }
        //性别修改前
        oDiv3[0].style.display = "none";
        oselect3[0].style.display = "block";
        if (oselect3[0].length == 0){
            for (var i=0; i<nSex.length; i++){
                oselect3[0].add(new Option(nSex[i],i));
            }
            switch (oDiv3[0].childNodes[0].nodeValue){
            case ‘男性‘:
            var iSno = 0;
            break;
            case ‘女性‘:
            var iSno = 1;
            break;
            case ‘保密‘:
            var iSno = 2;
            break;
            }
            oselect3[0].options[iSno].selected = true;
        }
    }else if (otype =="hide"){
        o.value="修改";
        o.setAttribute("onclick","edit(this,‘show‘)");
        //名字修改后
        oDiv1[0].childNodes[0].nodeValue = oInpt1[0].value;
        oDiv1[0].style.display = "block";
        oInpt1[0].style.display = "none";
        //年龄修改后
        oDiv2[0].childNodes[0].nodeValue = oselect2[0].value;
        oDiv2[0].style.display = "block";
        oselect2[0].style.display = "none";
        //性别修改后
        oDiv3[0].childNodes[0].nodeValue = nSex[oselect3[0].value];
        oDiv3[0].style.display = "block";
        oselect3[0].style.display = "none";
    }
}
//Delete TR
function del(o){
    var oTB = document.getElementById("TB");
    var oInpt = oTB.getElementsByTagName("input");
    if (o == ‘chk‘)
    {
        for (var i=1; i<oInpt.length ; i++)
        {
            if (oInpt[i].type == ‘checkbox‘ && oInpt[i].checked)
            {
                var oRow = oInpt[i].parentNode.parentNode.sectionRowIndex;
                oTB.deleteRow(oRow);
                i--;
            }
        }
    }else{
        var oDel = o.parentNode.parentNode.sectionRowIndex;
        oTB.deleteRow(oDel);
    }
}
//Check All
function chk(type,o){
    var oInpt = document.getElementsByTagName("input");
    for (var i=0; i<oInpt.length; i++){
        if (oInpt[i].type == "checkbox"){
            oInpt[i].checked = o.checked;
        }
    }
}
//Check Fan
function chkFun(){
    var oTB = document.getElementById("TB");
    var oInpt = oTB.getElementsByTagName("input");
    for (var i=1; i<oInpt.length; i++){
        if (oInpt[i].type == "checkbox"){
            if (oInpt[i].checked)
            {
                oInpt[i].checked = false;
            }else{
                oInpt[i].checked = true;
            }
        }
    }
}
</script>



下载源码