jsDOM增删改查

最新推荐文章于 2024-09-01 21:20:04 发布

跟着老王学前端

最新推荐文章于 2024-09-01 21:20:04 发布

阅读量180

点赞数 4

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_62223894/article/details/123535947

版权

<h2>学生信息管理</h2>
       <div class="div1">
           <p class="left">姓&emsp;&emsp;&emsp;名&emsp;：<input id="xingming" type="text" /><span></span></p>
           <p class="right">年&emsp;&emsp;&emsp;龄&emsp;：<input id="age" type="text" /><span></span></p>
       </div>
       <p></p>

       <div class="div1">

           <p class="right">身份证号码&emsp;：<input id="shenfen" type="text" /><span></span></p>
       </div>
       <p></p>

<div class="div1">
           <button id="tijiao">提交</button>&emsp;
           <button id="chaxun">查询</button>&emsp;
           <input id="neirong" type="text" /><br /><br /><br /><br /><br />
       </div>
       
       <div class="div2">
           <table id="biaoge" border="1">
               <tr>
                   <td>
                       <button οnclick="cheAll()">全选</button>
                   </td>
                   <td>姓名</td>
                   <td>性别</td>
                   <td>年龄</td>
                   <td>密码</td>
                   <td>邮箱</td>
                   <td>身份证号码</td>
                   <td>手机号码</td>
                   <td>
                       <button οnclick="cheDel()">全部删除</button>
                   </td>
               </tr>

</table>
</div>

//获取元素的属性

                                父级的父（tr），没有被选中不删除
3：i--的目的
因为每删除一个input框，所有input框的长度就会少一个，避免了漏删除的input框

                   }
               }
单选删除事件
function remove(_this){
otbody.removeChild(_this.parentNode.parentNode)
}

               function remove(_this){
                   //_this指的是单删除按钮
                   //找到单删除按钮的父元素的父元素的第一个子标签元素的第一个子标签input框是否被选中
                   if(_this.parentNode.parentNode.firstElementChild.firstElementChild.checked){
                       otbody.removeChild(_this.parentNode.parentNode);
                       //删除otbody标签里面tr标签
                       //_this.parentNode.parentNode 单删除按钮的父元素的父元素
                   }else{
                       alert('您未选中')
                   }

               }

               //查询
               var oTr=document.getElementsByTagName('tr');

oChaxun.οnclick=function(){
if(!oneirong.value){
alert('请输入查询内容')
}else{
for(var i=1; i<oTr.length-1; i++){
for(var k=1; k<oTr[i].childElementCount; k++){
if(oneirong.value==oTr[i].children[k].innerText){
oTr[k].style.display='none';
}
}
oTr[i].style.display='block';
}
}
}
oChaxun.οnclick=function(){
for(var i=1; i<oTr.length; i++){
//oTr[i].innerText.search(oneirong.value)
//'问问男 4 1 5 2 3 删除'.search(男)
if(oTr[i].innerText.search(oneirong.value)==-1){
oTr[i].style.display='none';
}
}