js简单的表格操作

最新推荐文章于 2023-07-28 10:02:57 发布

ququjioulai

最新推荐文章于 2023-07-28 10:02:57 发布

阅读量117

点赞数

分类专栏： js jquery 文章标签： json html javascript ViewUI

js jquery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

好久没写表格操作全忘了，看别人的看不懂，所以只有自己写个，没有用jquery，觉得直接用jquery写就搞不懂js是咋操作的，除了操作列每个单元格双击之后都能编辑，应该是各个浏览器都兼容吧。

main.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
        <script type="text/javascript">

            //修改tr样式
            function changeCkb(myObj){
                var myNode=myObj.parentNode.parentNode;
                if(myObj.checked){
                    myNode.style.backgroundColor='#CCFFCC';
                }else{
                    myNode.style.backgroundColor='#f8fbfc';
                }
            }

            //鼠标移动到行改变样式
            function mmove(obj){
                var colorVal=obj.style.backgroundColor;
                if(colorVal!='' && colorVal.charAt(0)!='#'){
                    colorVal=rgbHex(colorVal);
                }

                if(colorVal.toLowerCase()!='#CCFFCC'.toLowerCase()){
                    obj.style.backgroundColor='#ecfbd4';
                }
            }

            //鼠标移走改变样式
            function mout(obj){
                var colorVal=obj.style.backgroundColor;
                if(colorVal!='' && colorVal.charAt(0)!='#'){
                    colorVal=rgbHex(colorVal);
                }

                if(colorVal.toLowerCase()!='#CCFFCC'.toLowerCase()){
                    obj.style.backgroundColor='#f8fbfc';
                }


            }

            //把16进制颜色改为rgb颜色
            function rgbHex(rgb){
                   var regexp = /[0-9]{0,3}/g;  
                   var re = rgb.match(regexp);//利用正则表达式去掉多余的部分，将rgb中的数字提取
                   var hexColor = "#"; 
                   var hex = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];  
                   for (var i = 0; i < re.length; i++) {
                        var r = null, c = re[i], l = c; 
                        var hexAr = [];
                        while (c > 16){  
                              r = c % 16;  
                              c = (c / 16) >> 0; 
                              hexAr.push(hex[r]);  
                         } hexAr.push(hex[c]);
                         if(l < 16&&l != ""){        
                             hexAr.push(0)
                         }
                       hexColor += hexAr.reverse().join(''); 
                    }  
                   return hexColor;
            }

            //选中全部  all unAll
            function chkBtn(text){
                var chk=document.getElementsByName("ckbdel");
                for(var i=0;i<chk.length;i++){
                    var myNode=chk[i].parentNode.parentNode;
                    if(text=='all'){
                        chk[i].checked=true;
                        myNode.style.backgroundColor='#CCFFCC';
                    }else if(text=='unAll'){
                        chk[i].checked=false;
                        myNode.style.backgroundColor='#f8fbfc';
                    }

                }
            }

            //移动行数 up down
            function chkMove(text){
                var chk=document.getElementsByName("ckbdel");
                var chkChild;
                var num=0;
                //获取最后一个勾选的
                for(var i=0;i<chk.length;i++){
                    if(chk[i].checked==true){
                        chkChild=chk[i];
                        num++;
                    }
                }

                //勾选超过一个
                if(num>1){
                    alert("只能勾选一个");
                }else if(num==0){
                    alert("至少选择一个选项吧");
                }else{
                    if(typeof(chkChild)!='undefined'){
                        var tdlabel=chkChild.parentNode;
                        var trlabel=tdlabel.parentNode;
                        var tbodylabel=trlabel.parentNode;

                        //删除多余的#text节点
                        var num=tbodylabel.childNodes.length;
                        for(var i=0;i<num;i++){
                            if(typeof(tbodylabel.childNodes[i])!='undefined'){
                                if(tbodylabel.childNodes[i].nodeType!=1){
                                    tbodylabel.removeChild(tbodylabel.childNodes[i]);
                                    i--;
                                }
                            }
                        }

                        if(text=='up'){
                            if(trlabel.previousSibling.id!='tTop'){
                                tbodylabel.insertBefore(trlabel,trlabel.previousSibling);
                            }
                        }else if(text=='down'){
                            if(trlabel.nextSibling.id!='tBottom'){
                                tbodylabel.insertBefore(trlabel.nextSibling,trlabel);
                            }
                        }
                    }else{
                        alert("不能再上移了，再移就上天了");
                    }
                }
            }

            //把所有数据放入列表框里
            function updText(obj){
                var valhtml=obj.innerHTML;
                if(valhtml.indexOf("<input style=")!=0){
                   obj.innerHTML="<input type='text' value='"+valhtml+"' style='width:60px;height:13px;'/><input type='button' value='修改' onclick='_updText(this,\"yes\")' style='height:20px;'/><input type='button' value='取消' onclick='_updText(this,\"no\")' style='height:20px;'/><input type='hidden' value='"+valhtml+"'/>";

                   for(var i=0;i<obj.childNodes.length;i++){
                       if(obj.childNodes[i].type=='hidden'){
                           obj.childNodes[i].value=valhtml;
                       }
                   }
                }
            }

            //单行修改 yes为确认修改，no为取消修改，还原数据
            function _updText(obj,param){
                var pNode=obj.parentNode;
                var val="";
                var pLength=pNode.childNodes.length;
                for(var i=0;i<pLength;i++){
                    var flag=false;
                    if(param=='yes'){
                        flag=(pNode.childNodes[0].type=='text');
                    }else if(param=='no'){
                        flag=(pNode.childNodes[0].type=='hidden');
                    }

                    if(flag){
                        val=pNode.childNodes[0].value;
                    }
                    pNode.removeChild(pNode.childNodes[0]);
                }
                pNode.innerHTML=val;
            }

            //插入一行数据
            function insertData(){
                var newWin=window.open("child.html",'插入新值',"width=400,height=300,status=yes");
                newWin.title="插入新值";
            }

            //删除选中行
            function deleteData(){
                var chk=document.getElementsByName("ckbdel");
                var chkChild=new Array();

                //把勾选的全部获取放入数组
                for(var i=0;i<chk.length;i++){
                    if(chk[i].checked==true){
                        chkChild.push(chk[i]);
                    }
                }

                for(var i=0;i<chkChild.length;i++){

                    var tdlabel=chkChild[i].parentNode;
                    var trlabel=tdlabel.parentNode;
                    var tbodylabel=trlabel.parentNode;

                    tbodylabel.removeChild(trlabel);
                }
            }

            //添加一行数据
            function addRow(arr){

                var par=document.getElementById("myRable");
                for(var i=0;i<par.childNodes.length;i++){
                    if(par.childNodes[i].nodeType!=1){
                        par.removeChild(par.childNodes[i]);
                    }
                }

                var tbd=par.childNodes[0];
                //删除多余的#text节点
                var num=tbd.childNodes.length;
                for(var i=0;i<num;i++){
                    if(typeof(tbd.childNodes[i])!='undefined'){
                        if(tbd.childNodes[i].nodeType!=1){
                            tbd.removeChild(tbd.childNodes[i]);
                            i--;
                        }
                    }
                }

                var new_tr=document.createElement("tr");
                new_tr.setAttribute("onmousemove","mmove(this)");
                new_tr.setAttribute("onmouseout","mout(this)");

                for(var i=0;i<arr.length;i++){
                    var td=new_tr.insertCell(i);

                    if(arr[i].type=="text"){
                        td.setAttribute("ondblclick","updText(this)");
                    }else if(arr[i].type=="select-one"){
                        td.setAttribute("ondblclick","updSel(this)");
                    }

                    td.innerHTML=arr[i].value;
                }

                new_tr.insertCell(arr.length).innerHTML="<input type='hidden' value='00"+arr[0].value+"' /><input type='checkbox' onchange='changeCkb(this)' name='ckbdel'/>";
                tbd.insertBefore(new_tr,document.getElementById("tBottom"));
            }

            var jsonData=[];
            jsonData[0]={"id":"1","name":"豆浆","age":"10","state":"很好"};
            jsonData[1]={"id":"2","name":"油条","age":"100","state":"很好"};
            jsonData[2]={"id":"3","name":"牛奶","age":"1000","state":"很好"};
            jsonData[3]={"id":"4","name":"面包","age":"1","state":"很好"};

            function downPage(){
                var par=document.getElementById("myRable");
                //删除那些#text
                for(var i=0;i<par.childNodes.length;i++){
                    if(par.childNodes[i].nodeType!=1){
                        par.removeChild(par.childNodes[i]);
                    }
                }
                //获取tbody
                var tbd=par.childNodes[0];
                //删除按钮行以前的行，删到标题行就不删了
                var tbtn=document.getElementById("tBottom");
                var num=0;
                while(num==0){
                    if(tbtn.previousSibling.nodeType!=1 || tbtn.previousSibling.id!='tTop'){
                        tbd.removeChild(tbtn.previousSibling);
                    }else{
                        num=1;
                    }
                }

                //添加新的行，想用array又觉得麻烦，懒得改了，纠结
                for(var i=0;i<jsonData.length;i++){
                    var new_tr=document.createElement("tr");
                    new_tr.setAttribute("onmousemove","mmove(this)");
                    new_tr.setAttribute("onmouseout","mout(this)");

                    var td=new_tr.insertCell(0);
                    td.innerHTML=jsonData[i].id;
                    td.setAttribute("ondblclick","updText(this)");
                    var td=new_tr.insertCell(1);
                    td.innerHTML=jsonData[i].name;
                    td.setAttribute("ondblclick","updText(this)");
                    var td=new_tr.insertCell(2);
                    td.innerHTML=jsonData[i].age;
                    td.setAttribute("ondblclick","updText(this)");
                    var td=new_tr.insertCell(3);
                    td.innerHTML=jsonData[i].state;
                    td.setAttribute("ondblclick","updSel(this)");
                    new_tr.insertCell(jsonData.length).innerHTML="<input type='hidden' value='00"+jsonData[i].id+"' /><input type='checkbox' onchange='changeCkb(this)' name='ckbdel'/>";
                    tbd.insertBefore(new_tr,document.getElementById("tBottom"));
                }
            }

            //------------------------------------------------------------------------------------------------------------------

            var selVal=new Array();
            var json=[{"name":"很好","value":"很好"},{"name":"不好","value":"不好"},{"name":"好毛线","value":"好毛线"}];

            function updSel(obj){
                var sel=document.createElement("select");
                var text=obj.innerHTML;
                var selected=0;
                for(var i=0;i<json.length;i++){
                     var opt=new Option(json[i].name,json[i].value);
                     //根据text设置option选择项，这里是为了方便显示，只获取值就不用通过这种方法
                     if(json[i].name==text){
                         opt.setAttribute("selected","selected")
                     }
                     sel.add(opt,null);
                }

                var nodeHtml="<input type='button' value='修改' onclick='_updSel(this,\"yes\")' style='height:20px;'/>";
                nodeHtml+="<input type='button' value='取消' onclick='_updSel(this,\"no\")' style='height:20px;'/>";
                nodeHtml+="<input type='hidden' value='"+text+"'/>";
                obj.innerHTML="";
                obj.appendChild(sel);
                obj.innerHTML=obj.innerHTML+nodeHtml;
            }

            function _updSel(obj,param){
                var pNode=obj.parentNode;
                var val="";
                var pLength=pNode.childNodes.length;
                for(var i=0;i<pLength;i++){
                    var flag=false;
                    if(param=='yes'){
                        flag=(pNode.childNodes[0].type=='select-one');
                        if(flag){

                            var mysel=pNode.childNodes[0];

                            for(var j=0;j<mysel.length;j++){
                                if(mysel[j].value==mysel.value){
                                    val=mysel[j].text;
                                }
                            }
                        }
                    }else if(param=='no'){
                        flag=(pNode.childNodes[0].type=='hidden');
                        if(flag){
                            val=pNode.childNodes[0].value;
                        }
                    }
                    pNode.removeChild(pNode.childNodes[0]);
                }
                pNode.innerHTML=val;
            }

            //获取选中行信息ID，本来想把id放在编号后面，后来想想也麻烦，那样要取当前节点的父节点的父节点的第一个子节点，还不如就丢旁边直接获取当前节点的前一个节点或后一个节点
            function getByIds(){
                var ids="勾选的编号有:";
                var ckbs=document.getElementsByName("ckbdel");
                var params=new Array();
                //获取所有勾选的节点的父节点的父节点
                for(var i=0;i<ckbs.length;i++){
                    if(ckbs[i].checked==true){
                        params.push(ckbs[i]);
                    }
                }

                if(params.length>0){
                    for(var i=0;i<params.length;i++){
                        if(params[i].previousSibling.nodeType!=1){
                           params[i].parentNode.removeChild(params[i].previousSibling);
                        }
                        ids+=params[i].previousSibling.value;
                        if(i!=(params.length-1)){
                            ids+="-----";
                        }
                    }
                    alert(ids);
                }
            }

            //编辑当前行
            function updAll(objChild){
                //获取当前节点的父节点的父节点，及btn》td》tr
                var obj=objChild.parentNode.parentNode;
                //删除多余的#text节点
                var num=obj.childNodes.length;
                for(var i=0;i<num;i++){
                    if(typeof(obj.childNodes[i])!='undefined'){
                        if(obj.childNodes[i].nodeType!=1){
                            obj.removeChild(obj.childNodes[i]);
                            i--;
                        }
                    }
                }

                num=obj.childNodes.length-1;
                for(var i=0;i<num;i++){
                    var valhtml=obj.childNodes[i].innerHTML;
                    if(valhtml.indexOf("<input style=")!=0){
                        obj.childNodes[i].innerHTML="<input type='text' value='"+valhtml+"' style='width:60px;height:13px;'/><input type='hidden' value='"+valhtml+"'/>";
                    }
                }
                obj.childNodes[num].innerHTML="<input type='button' onclick='updRow(this,\"yes\")' value='修改'><input type='button' onclick='updRow(this,\"no\")' value='取消'>";
            }

            //修改行，param yes为确认修改，no为取消修改
            function updRow(obj,param){
                var pNode=obj.parentNode.parentNode;

                var num=pNode.childNodes.length-1;

                for(var i=0;i<num;i++){
                    var val="";
                    var tdNode=pNode.childNodes[i];
                    var pLength=tdNode.childNodes.length;
                    for(var j=0;j<pLength;j++){
                        var flag=false;
                        if(param=='yes'){
                            flag=(tdNode.childNodes[0].type=='text');
                        }else if(param=='no'){
                            flag=(tdNode.childNodes[0].type=='hidden');
                        }

                        if(flag){
                            val=tdNode.childNodes[0].value;
                        }
                        tdNode.removeChild(tdNode.childNodes[0]);
                    }
                    tdNode.innerHTML=val;
                }
                pNode.childNodes[num].innerHTML="<input type='button' value='编辑' onclick='updAll(this)'>";
            }


        </script>
    </head>
    <body>
        <table id="myRable" border="1" style="background-color: #f8fbfc;color: #000000;width: 800px;">
            <tr id="tTop" onmousemove="mmove(this);" onmouseout="mout(this);">
                <td width="100">编号</td>
                <td width="100">姓名</td>
                <td width="200">年龄</td>
                <td width="200">状态</td>
                <td width="200">操作</td>
            </tr>
            <tr onmousemove="mmove(this);" onmouseout="mout(this);">
                <td ondblclick='updText(this)'>3</td>
                <td ondblclick='updText(this)'>张三</td>
                <td ondblclick="updText(this)">100</td>
                <td ondblclick='updSel(this)'>很好</td>
                <td><input type="hidden" value="003" />
                    <input type="checkbox" onchange="changeCkb(this)" name="ckbdel"/>
                 </td>
            </tr>
            <tr onmousemove="mmove(this);" onmouseout="mout(this);">
                <td ondblclick='updText(this)'>4</td>
                <td ondblclick='updText(this)'>李四</td>
                <td ondblclick="updText(this)">100</td>
                <td ondblclick='updSel(this)'>很好</td>
                <td><input type="hidden" value="004" />
                  <input type="checkbox" onchange="changeCkb(this)" name="ckbdel"/>
                 </td>
            </tr>
            <tr onmousemove="mmove(this);" onmouseout="mout(this);">
                <td ondblclick='updText(this)'>5</td>
                <td ondblclick='updText(this)'>王五</td>
                <td ondblclick="updText(this)">100</td>
                <td ondblclick='updSel(this)'>很好</td>
                <td><input type="hidden" value="005" />
                  <input type="checkbox" onchange="changeCkb(this)" name="ckbdel"/>
                 </td>
            </tr>
            <tr onmousemove="mmove(this);" onmouseout="mout(this);">
                <td ondblclick='updText(this)'>6</td>
                <td ondblclick='updText(this)'>赵六</td>
                <td ondblclick="updText(this)">100</td>
                <td ondblclick='updSel(this)'>很好</td>
                <td><input type="hidden" value="006" />
                  <input type="checkbox" onchange="changeCkb(this)" name="ckbdel"/>
                 </td>
            </tr>
            <tr onmousemove="mmove(this);" onmouseout="mout(this);">
                <td ondblclick='updText(this)'>7</td>
                <td ondblclick='updText(this)'>杨七</td>
                <td ondblclick="updText(this)">100</td>
                <td ondblclick='updSel(this)'>很好</td>
                <td><input type="hidden" value="007" />
                  <input type="checkbox" onchange="changeCkb(this)" name="ckbdel"/>
                 </td>
            </tr>
            <tr id="tBottom">
                <td colspan="5" align="right">
                    <input type="button" onclick="getByIds()"  value="获取勾选项编号"/>
                    <input type="button" onclick="insertData()"  value="插入"/>
                    <input type="button" onclick="deleteData()"  value="删除"/>
                    <input type="button" onclick="chkMove('up')"  value="上移"/>
                    <input type="button" onclick="chkMove('down')"  value="下移"/>
                    <input type="button" onclick="chkBtn('all')"  value="全选"/>
                    <input type="button" onclick="chkBtn('unAll')"  value="反选"/>
                </td>
            </tr>
            <tr>
                <td colspan="5" align="right">
                    <a href="javascript:void(0)" onclick="downPage()">下一页</a>
                </td>
            </tr>
            <tr>
                <td>8</td>
                <td>周八</td>
                <td>100</td>
                <td>很好</td>
                <td><input type="button" value="编辑" onclick="updAll(this)"></td>
            </tr>
        </table>
    </body>
</html>

弹出窗口child.html,本来想用层，可惜技术不行又懒，只能用子窗口了


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>插入新值</title>
        <script type="text/javascript">
            function addData(){
                var id=document.getElementById("id");
                var name=document.getElementById("name");
                var age=document.getElementById("age");
                var state=document.getElementById("state");

                var json=[];
                json[0]={"type":id.type,"value":id.value};
                json[1]={"type":name.type,"value":name.value};
                json[2]={"type":age.type,"value":age.value};
                json[3]={"type":state.type,"value":state.value};

                if(window.opener){
                    alert(json);
                    window.opener.addRow(json);
                }
                window.close();
            }
        </script>
    </head>
    <body>
        <table>
            <table border="1">
                <tr>
                    <td>编号</td>
                    <td><input id="id"/></td>
                </tr>
                <tr>
                    <td>姓名</td>
                    <td><input id="name"/></td>
                </tr>
                <tr>
                    <td>年龄</td>
                    <td><input id="age"/></td>
                </tr>
                <tr>
                    <td>状态</td>
                    <td>
                        <select id="state">
                            <option value="很好">很好</option>
                            <option value="很不好">很不好</option>
                            <option value="好毛线">好毛线</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td colspan="2"><input type="button" value="插入一行" onclick="addData()"/> </td>
                </tr>
            </table>
        </table>
    </body>
</html>

顺便把源文件发上来，免得以后自己想看都找不到了，最后效果这个样子，搞不懂样式所以很丑

[img]http://f6.topit.me/6/42/65/11718004704be65426o.jpg[/img]

ququjioulai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js简单的表格操作

好久没写表格操作全忘了，看别人的看不懂，所以只有自己写个，没有用jquery，觉得直接用jquery写就搞不懂js是咋操作的，除了操作列每个单元格双击之后都能编辑，应该是各个浏览器都兼容吧。main.html[code="html"] New Web Project ...
复制链接

扫一扫

专栏目录