增删改table的元素

增删改table的元素,第1张

概述增删改table的元素

下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。

内存溢出小编现在分享给大家,也给大家做个参考。

<!DOCTYPE HTML><HTML>  <head>    <Title>register</Title>    <Meta http-equiv="X-UA-Compatible" content="IE=edge"/>    <Meta http-equiv="content-type" content="text/HTML; charset=utf-8"/>    <Meta name="vIEwport" content="wIDth=device-wIDth,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>    <Meta name="apple-mobile-web-app-capable" content="yes"/>    <link href="register.CSS" type="text/CSS" rel="stylesheet"/>    <script type="text/JavaScript" src="Jslib/jquery-1.6.min.Js"></script>    <script>    function edit(){        $('span').CSS('display','block');        $('.revise').CSS('display','block');        $("#edit").CSS("display","none");        $("#removeedit").CSS("display","block");    }    function removeedit(){        $('span').CSS('display','none');        $('.revise').CSS('display','none');        $("#edit").CSS("display","block");        $("#removeedit").CSS("display","none");    }    function add(){            $("tbody").append($('<tr><td>' + $("#name").val() +'</td><td>'+$("#sex").val()+'</td><td>'+$("#phone").val()+'</td><td><span>删除</span></td><td><p ID="revise" >修改</p></td><td><p ID ="keep">保存</p></td></tr>'));    }    $(function(){         $("#List").delegate("td span","click",function(e){          $(this).parents("tr").remove();        })             })    $(function(){ //让input为可编辑状态        $("#List").delegate("td #revise",function(a){          $(this).parents("tr").find("input").removeAttr("Disabled","Disabled");          $(this).CSS("display","none");          $(this).parents("tr").find("#keep").CSS("display","block");        })           $("#List").delegate("td #revise",function(a){          $(this).parents("tr").find("select").removeAttr("Disabled","Disabled");        })           $("#List").delegate("td #keep",function(a){          $(this).parents("tr").find("input").attr("Disabled","true");          $(this).CSS('display','none');        })        $("#List").delegate("td #keep",function(a){          $(this).parents("tr").find("select").attr("Disabled","true");        })      })    </script>  </head>  <body>    <div >        <table ID ="List" border="0" cellpadding="0" cellspacing="0">            <thead>                <tr>                    <th>姓名</th>                    <th>性别</th>                    <th>手机号</th>                </tr>            </thead>            <tbody>                <tr>                    <td><input type="text"  value="hello" Disabled="true"/></td>                    <td>                        <select Disabled="true">                            <option>男</option>                             <option>女</option>                        </select>                    </td>                    <td><input type="text"  value="18329137530" Disabled="true"/></td>                    <td><span>删除</span></td>                    <td><p ID="revise" >修改</p></td>                    <td><p ID ="keep" >保存</p></td>                </tr>                <tr>                    <td><input  type="text" value="hello" Disabled="true"/></td>                    <td>                        <select Disabled="true">                            <option>男</option>                             <option>女</option>                        </select>                    </td>                    <td><input type="text"  value="18329137530" Disabled="true"/></td>                    <td><span>删除</span></td>                    <td><p ID="revise" >修改</p></td>                    <td><p ID ="keep" >保存</p></td>                </tr>                <tr>                    <td><input type="text"  value="hello" Disabled="true"/></td>                    <td>                        <select Disabled="true">                            <option>男</option>                             <option>女</option>                        </select>                    </td>                    <td><input type="text"  value="18329137530" Disabled="true"/></td>                    <td><span>删除</span></td>                    <td><p ID="revise" >修改</p></td>                    <td><p ID ="keep" >保存</p></td>                </tr>            </tbody>        </table>            <button onclick="document.getElementByID('add').style.display='block'">添加</button></br>        <button ID="edit" onclick="edit()">编辑</button>        <button ID="removeedit" class = "removeedit" onclick="removeedit()">退出编辑</button>    </div>      <div  ID="add">        姓名:<input ID="name" type="text"/ value=""></br>        性别: <select ID="sex">                <option>男</option>                 <option>女</option>               </select></br>        电话: <input ID = "phone" type="text"/></br>        <button ID = "cancel">取消</button>            <button ID = "confirm" onclick="add(),document.getElementByID('add').style.display='none'">确定</button>    </div>  </body></HTML>

以上是内存溢出(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的增删改table的元素全部内容,希望文章能够帮你解决增删改table的元素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://www.54852.com/web/1098085.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-28
下一篇2022-05-28

发表评论

登录后才能评论

评论列表(0条)

    保存