纯js增删改查页面

最新推荐文章于 2024-09-18 22:34:06 发布
meng0911
最新推荐文章于 2024-09-18 22:34:06 发布
阅读量1.6k
点赞数
文章标签： function FUNCTION java javascript
本文链接：https://blog.csdn.net/mengfanlujava/article/details/8228543
版权
方便增删改查页面写来写去，一次行解决，里面全用Ajax实现交互。

 
js夹，myjs0.js代码：
 
function view(object){
 
                var table=document.getElementById("table1");
 
                table.ondblclick=function(event){
 
                    return insert(event);
 
                };
 
                table.onclick=updata;
 
                var divfirst=document.getElementById("divfirst");
 
                var table1_tbody=table.lastChild;
 
                var children=table1_tbody.childNodes;
 
                if(divfirst.style.display=="none"){
 
                    divfirst.style.display="";
 
                    object.innerHTML="-菜单栏";
 
                    for(var i=0;i<children.length;i++){
 
                        if(i==0){
 
                            var td=document.createElement("td");
 
                            td.innerHTML="操作栏";
 
                            td.id="title";
 
                            children[i].appendChild(td);
 
                        }else if(children[i].nodeName.toLowerCase() =="tr"){
 
                            var td=document.createElement("td");
 
                            td.innerHTML="<span style='cursor:pointer;color:#0000AA' onclick='deleteSingle(this)'>删除</span>";
 
                            //td.name="program";
 
                            children[i].appendChild(td);
 
                        }
 
                    }
 
                }else{
 
                //保存更改值
 
                    var inserts=document.getElementsByName("insert");
 
                    if(inserts.length>0){
 
                        var value=document.getElementById("indextext").value;
 
                        var td=inserts[0].parentNode
 
                        var id=td.parentNode.id;
 
                        var flag=true; 
 
                        if(value!=inserts[0].value){
 
                            //ajax,得到flag值
 
                            value=inserts[0].value;
 
                            alert("我要Ajaxle ");
 
                        }
 
                        if(flag){
 
                            td.innerHTML=value;
 
                        }                  
 
                    }
 
                    //保存新增的值
 
                    var tbody_last=table1_tbody.lastChild;
 
                    while(true){
 
                        if(tbody_last.nodeName.toLowerCase()=="tr") break;
 
                        tbody_last=tbody_last.previousSibling;
 
                    }
 
                    while(true){
 
                        if(tbody_last.nodeName.toLowerCase()=="tr"&&tbody_last.lastChild.lastChild.innerHTML=="保存"){
 
                            save(tbody_last.lastChild.lastChild);
 
                            tbody_last=tbody_last.previousSibling;
 
                        }else{break;}
 
                    }
 
                     
 
                     
 
                    for(var i=0;i<children.length;i++){
 
                        if(children[i].nodeName.toLowerCase() =="tr"){
 
                            children[i].removeChild(children[i].lastChild);
 
                        }
 
                    }
 
                    divfirst.style.display="none";
 
                    object.innerHTML="+菜单栏";
 
                     
 
                }
 
                 
 
            }
 
             
 
            function addrow(){
 
                var table_tbody=table1().lastChild;
 
                 
 
                var s=document.getElementsByName("save");
 
                if(s.length>0){
 
                    var object=s[0];
 
                    save(object);
 
                }
 
             
 
                var table_tbody_second=table1().lastChild.firstChild.nextSibling;
 
                var newtr=document.createElement("tr");
 
                var children=table_tbody_second.childNodes;
 
                var mir=0;
 
                var pname=names();
 
                for(var i=0;i<children.length;i++){
 
                     
 
                    if(children[i].nodeName.toLowerCase()=="td"){
 
                        if(mir==pname.length){
 
                            newtr.innerHTML+="<td><span style='cursor:pointer;color:#0000AA' onclick='save(this)' name='save'>保存</span></td>";
 
                        }else if(mir==0){
 
                            newtr.innerHTML+="<td></td>";//"<input type='checkbox' name='id'/>"
 
                             
 
                        }else{
 
                            newtr.innerHTML+="<td><input type='text' name='"+pname[mir]+"'/></td>";
 
                        }
 
                        mir++;
 
                    }
 
                }
 
                //table_tbody.insertBefore(table_tbody_second,newtr);
 
                table_tbody.appendChild(newtr);
 
                //alert(newtr.innerHTML);
 
            }
 
         
 
        function save(object){
 
         
 
            var tr=object.parentNode.parentNode;
 
            var td=tr.firstChild;
 
            var flag=true;
 
            var string="";
 
            var id=null;
 
             
 
            while(td){
 
                td=td.nextSibling;
 
                if(td==null) break;
 
                var input=td.firstChild;
 
                if(input.nodeName.toLowerCase()=="input"){
 
                    string+=input.name+":"+input.value+","
 
                    continue;
 
                }
 
            }
 
            var json="{"+string.substring(0,string.length-1)+"}";
 
            alert(json)
 
            //执行ajax（input.name:input.value） 返回id和其它值，定义一个flag，判读是否再执行后面的句子,
 
            if(flag==true){
 
                td=tr.firstChild;
 
                td.innerHTML="<input type='checkbox' name='id' value='"+id+"'/>";
 
                while(td){
 
                    td=td.nextSibling;
 
                    if(td==null) break;
 
                    var input=td.firstChild;
 
                    if(input.nodeName.toLowerCase()=="input"){
 
                        td.innerHTML=input.value;
 
                        continue;
 
                    }
 
                    if(input.nodeName.toLowerCase()=="span"&&flag==true){
 
                        td.innerHTML="<span style='cursor:pointer;color:#0000AA' onclick='deleteSingle(this)'>删除</span>";
 
                    }
 
                }
 
            }
 
        }
 
function table1(){
 
    return document.getElementById("table1");
 
}
 
function names(){
 
    var name = [];
 
    var tr=document.getElementById("hiddentr");
 
    var tr_children=tr.childNodes;
 
    for(var i=1;i<tr_children.length-1;i++){
 
        if(tr_children[i].nodeName.toLowerCase()=="td"){
 
            name.push(tr_children[i].innerHTML);
 
        }
 
    }
 
    return name;
 
}
 
function insert(event){
 
                var evt=window.event||event;
 
                var td=evt.srcElement||evt.target;
 
                var value=null;
 
                if(td.nodeName.toLowerCase()!="span"&&td.id!="title"){
 
                    if(td.childNodes.length>0){
 
                        //alert(td.firstChild.nodeName.toLowerCase());
 
                        if(td.firstChild.nodeName.toLowerCase()!="span"){
 
                            value=td.innerHTML;
 
                            td.innerHTML="<input type='text' name='insert' value='"+td.innerHTML+"'/>";
 
                        }
 
                    }else{
 
                        value=td.innerHTML;
 
                        td.innerHTML="<input type='text' name='insert' value='"+td.innerHTML+"'/>";
 
                    }
 
                }
 
                document.getElementById("indextext").value=value;
 
                return value;
 
            }
 
            function updata(event){
 
            //alert(value+"bbb")有一个方案还为解决，当单元格数据不变的时候，应该不响应，现在无法获得之前的值..我增加了一个indextext作为比较，无奈之举，顺便做了一个重置
 
                var evt=window.event||event;
 
                var td=evt.srcElement||evt.target;
 
                var insert=document.getElementsByName("insert");
 
                if(insert.length>0&&td!=insert[0]){
 
                    var td=insert[0].parentNode;
 
                    var value=insert[0].value;
 
                    var id=td.parentNode.id;
 
                    var flag=true;
 
                    if(value!=document.getElementById("indextext").value){
 
                        //ajax,得到flag值
 
                        alert("我要Ajaxle ");
 
                    }
 
                    if(flag){
 
                        td.innerHTML=value;
 
                    }                  
 
                }
 
            }
 
            function selectAll(){
 
                var databox =document.getElementsByName("id");
 
                var lastbox=document.getElementById("lastbox");
 
                lastbox.checked=!lastbox.checked;
 
                var flag=lastbox.checked;
 
                for(var i=0;i<databox.length;i++){
 
                    databox[i].checked=flag;
 
                }
 
            }
 
            function inverseselect(){
 
                var databox =document.getElementsByName("id");
 
                for(var i=0;i<databox.length;i++){
 
                    databox[i].checked=!databox[i].checked;
 
                }
 
            }
 
            function deleteAll(){
 
                var databox =document.getElementsByName("id");
 
                for(var i=0;i<databox.length;i++){
 
                    if(databox[i].checked==true){
 
                    var id=databox[i].value;
 
                    //dao AJAX里面成功删除后再删除节点。这里用来测试端页面
 
                    var tr= databox[i].parentNode.parentNode
 
                    //或者 var tr=docuemnt.getElementById(databox[i].value);
 
                    tr.parentNode.removeChild(tr);
 
                    i--;
 
                    }
 
                }
 
            }
 
            function deleteSingle(object){
 
                var tr=object.parentNode.parentNode;
 
                var id=tr.id;
 
                //AJAX里面成功后，再删除节点。这里用来测试端页面
 
                tr.parentNode.removeChild(tr);
 
            }
 
            function resetValue(){
 
                var insert=document.getElementsByName("insert");
 
                if(insert.length>0){
 
                    insert[0].value=document.getElementById('indextext').value;
 
                }
 
            }
 
         
 
 
 
HTML,页面代码：
 
<html>
 
    <head>
 
        <title>biao1</title>
 
        <meta http-equiv="Content-Type" content="text/html;charset=gbk"/>
 
        <meta http-equiv="pragma" content="no-cach" />
 
        <script type="text/javascript" src="js/jquery-1.4.4.js"></script>
 
        <script type="text/javascript" src="js/Myjs0.js"></script>
 
        <script>
 
             
 
        </script>
 
    </head>
 
    <body>
 
        <form method="get" action="#" name="frm1">
 
        <span style="cursor:pointer;color:#0000AA"onclick="javascript:view(this)">+菜单栏</span>&nbsp;
 
        <div id="divfirst" style="display:none">
 
                <input type="checkbox" id="lastbox" disabled >
 
                <span style=" cursor:pointer;color:#0000AA"onclick="selectAll()">【全选】</span>&nbsp;
 
                <span style="cursor:pointer;color:#0000AA"onclick="inverseselect()">【反选】</span>&nbsp;
 
                <span style=" cursor:pointer;color:#0000AA"onclick="deleteAll()">【删除】</span>&nbsp;
 
                <span style="cursor:pointer;color:#0000AA"onclick="addrow()">【添加】</span>&nbsp;
 
                <span style="color:#0000AA">
 
                <input type='text' id='indextext' disabled></input>
 
                <input type='button' style="cursor:pointer;color:#0000AA"onclick="resetValue()" value="【重置】"/></span>&nbsp;
 
        </div>
 
        <div>
 
            <table id="table1" border=1px style="border-collapse:collapse;color:#00AA00">
 
                <th id="firsttr" name="firsttr">
 
                    <th width='153' id="title">as</th><th width='153'id="title">sa</th><th width='153' id="title">ee</th><th width='153'id="title">ds</th><th width='153' id="title">ca</th>
 
                </th>
 
                <tr id="hiddentr" style="display:none">
 
                    <td>id</td><td>name</td><td>age</td><td>gendar</td><td>birthday</td><td>discript</td>
 
                </tr>
 
                <tr>
 
                    <td id="1_1" ><input type="checkbox" name="id"/></td><td id="1_2">2</td><td id="1_3">3</td>
 
                    <td id="1_4">4</td><td id="1_5">5</td><td id="1_6">6</td>
 
                </tr>
 
                <tr>
 
                    <td id="2_1"><input type="checkbox" name="id"/></td><td id="2_2"></td><td id="2_3"></td><td id="2_4"></td><td id="2_5"></td><td id="1_6">6</td>
 
                </tr>
 
            </table>
 
        </div>
 
        </form>
 
    </body>
 
</html>