JAVAScript--增删改查案例2

最新推荐文章于 2024-07-18 10:24:18 发布

公诚士

最新推荐文章于 2024-07-18 10:24:18 发布

阅读量135

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47200160/article/details/117966512

版权

html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .form{
            display: flex;
        }
        .table{
            border-collapse: collapse;
            width: 70vw;
            text-align: center;
        }
        .table th,.table td{             
            border: 1px solid red;
        }
        .night{
            background: #000;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="bb">
        <form class="form">
            <div>
                <label for="title">新闻标题:</label>
                <input type="text" id="title">
            </div>
            <div>
                <label for="msg">新闻内容:</label>
                <input type="text" id="msg">
            </div>
            <div>
                <label for="user">作者姓名:</label>
                <select name="" id="user">
                    <option value="张总编">编辑一部</option>
                    <option value="李总编">编辑一部</option>
                </select>
            </div>
            <div>
                <input type="button" value="添加新闻" id="add">
                <input type="button" value="确认修改" id="editOk">
            </div>
        </form>
    </div>
    <div>
        
           <div>
              <label for="">新闻检索</label> 
              <input type="text" id="search" >
              <button id="searchBtn">搜索</button>
           </div> 
           
           
        
    </div>
    <button  onclick="alldel()">全部删除</button>
    <button  onclick="openClose()">开启夜间模式</button>
    <table class="table">
        <thead>
            <tr>
                <th>序号</th> 
                <th>新闻标题</th>
                <th>新闻内容</th>
                <th>作者</th>
                <th>操作</th>

            </tr>
        </thead>
        <tbody id="tbody">
            <!-- <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td><button onclick="dei()"">刪除</button></td>
            </tr> -->
        </tbody>
    </table>
   <script src="./ll.js"></script>
</body>
</html>

javaScript代码:(附详细注释)

//alert("ss")
//模拟数据
/* var arr=[
    {"id":11,"title":"aaa","msg":"aaaa","user":"张总编"},
    {"id":22,"title":"bbb","msg":"bbb","user":"张总编"},
    {"id":33,"title":"ccc","msg":"ccc","user":"张总编"},
    {"id":44,"title":"ddd","msg":"ddd","user":"李总编"}
]; */
var arr=localStorage.getItem("p2KaoShi")?JSON.parse( localStorage.getItem("p2KaoShi") ).info:[];
//渲染
 function show(res){
    var str="";
    if(res.length>0){
        for(var i=0;i<res.length;i++){
            str+=`       
                <tr>
                    <td>${i+1}</td>
                    <td>${res[i].title}</td>
                    <td>${res[i].msg}</td>
                    <td>${res[i].user}</td>
                    <td>
                    <button onclick="del(${res[i].id})">刪除</button>
                    <button onclick="edit(${res[i].id})">修改</button>
                    </td>
                </tr>
            `
        }
    }else{
        str+=`       
        <tr>
           <th colspan="5">暂无数据</th>
        </tr>
    ` 
    }
    

    document.getElementById("tbody").innerHTML=str;
 }
 //加载完毕立即渲染
window.onload=function(){

    show(arr);
}

//刪除
function del(id){
    var index=arr.findIndex(function(v){
        return v.id==id;
    })
    arr.splice(index,1);

    //存储数据
    localStorage.setItem("p2KaoShi",JSON.stringify({"info":arr}));

    //渲染数据
    show(arr);
}
//全部刪除
function alldel(){
    arr=[];

    //存储数据
    localStorage.setItem("p2KaoShi",JSON.stringify({"info":arr}));

    //渲染数据
    show(arr);

}

//添加
var addDom=document.getElementById("add");
    addDom.onclick=function(){
    var titleDom=document.getElementById("title");
    var msgDom=document.getElementById("msg");
    var userDom=document.getElementById("user");
    //获取值
    var title=titleDom.value;
    var msg=msgDom.value;
    var user=userDom.value;
   
    if(title && msg && user){
        //添加数组

        arr.push( 
            {
            "id":new Date().getTime(),
            "title":title,
            "msg":msg,
            "user":user
        }    )

        //存储数据
        localStorage.setItem("p2KaoShi",JSON.stringify({"info":arr}));

        //渲染数据
        show(arr);
    }else{
        alert("不能空");
    }

}
//开启/关闭夜间模式
var flag=false;
function openClose(){
        //console.log("ll");
    flag=!flag;

    var e=event || window.event;

    if(flag==true){

        document.body.classList.add("night");
        e.target.innerText="关闭夜间模式";
    }else{
        document.body.classList.remove("night");
        e.target.innerText="开启夜间模式";
    }
}
        //回车搜索
var searchDom=document.getElementById("search");
    searchDom.onkeydown=function(){
        //h获取所有的tr
    var trsDom = document.querySelectorAll("#tbody>tr");
        //console.log(trsDom);
        //获取搜索框值
    var e=event || window.event;
    var search = searchDom.value;
    //让所有的tr去除样式
    for(var j=0;j<trsDom.length;j++){
        trsDom[j].style.background="";

    }
//    键盘事件对象e.keyCode==13表示回车键按下,且搜索栏有值
    if( e.keyCode==13 && search){

        for(var i=0;i<arr.length;i++){
            if( arr[i].title.includes(search) ||
             arr[i].msg.includes(search) || 
             arr[i].user.includes(search) 
             ){
               trsDom[i].style.background="red";
            }else{
                trsDom[i].style.background="";
            }

        }
    }
}
//点击按钮搜索
//----获取搜索按钮
var searchBtnDom=document.getElementById("searchBtn");
//--添加点击事件
searchBtnDom.onclick=function(){
    var search=searchDom.value;
       //h获取所有的tr
       var trsDom = document.querySelectorAll("#tbody>tr");
       //console.log(trsDom);
       //获取搜索框值
  
   //先让所有的tr去除样式,防止搜索下一次出现上次出现的颜色
   for(var j=0;j<trsDom.length;j++){
       trsDom[j].style.background="";

   }
//search有值则执行,没有值则不执行,
   if(search){
       for(var i=0;i<arr.length;i++){
           //如果标题/内容/作者包含搜索的值,则显示那一行为红色
           if( arr[i].title.includes(search) ||
            arr[i].msg.includes(search) || 
            arr[i].user.includes(search) 
            ){
              trsDom[i].style.background="red";
           }else{
              trsDom[i].style.background="";
           }

       }
   }
}
//点击修改
 var editIndex;
//index=arr.findIndex(function(v),v就表示是一条arr的数据,比如是{"id":22,"title":"bbb","msg":"bbb","user":"张总编"},然后v.id就表示为22,然后edit(id)传入的id与这个22相等的话,返回下标index,然后把index赋值给editIndex,在确认修改模块,通过修改input框的值赋值给数组arr[editIndex]
function edit(id){
    var index=arr.findIndex(function(v){
        return v.id==id;
    })
    //点击修改后,添加按钮隐藏
    addDom.style.display="none";
    //点击修改按钮后修改确认按钮显示出来
    document.getElementById("editOk").style.display="block";
    //获取表单各个元素
    var titleDom=document.getElementById("title");
    var msgDom=document.getElementById("msg");
    var userDom=document.getElementById("user");
    //console.log(titleDom);

    //表格里的数据赋值给input框
    titleDom.value=arr[index].title;
    userDom.value=arr[index].user;
    msgDom.value=arr[index].msg;

    editIndex=index;


}
//确认修改
//获取修改确认按钮,通过id
var editOkDom=document.getElementById("editOk");
//绑定点击事件
        editOkDom.onclick=function(){
         //console.log("11");//验证绑定是否成功!

    //获取表单各个元素
    var titleDom=document.getElementById("title");
    var msgDom=document.getElementById("msg");
    var userDom=document.getElementById("user");
    //console.log(titleDom);验证值是什么?

    //input输入框的值,赋值给表格
    var title=titleDom.value;
    var user=userDom.value;
    var msg=msgDom.value;

    arr[editIndex].title =title;
    arr[editIndex].msg =msg;
    arr[editIndex].user =user;

        //存储数据
    localStorage.setItem("p2KaoShi",JSON.stringify({"info":arr}));
    show(arr);
    //去空
    titleDom.value="";
    msgDom.value="";

        //点击修改后,添加按钮隐藏
        addDom.style.display="block";
        //点击修改按钮后修改确认按钮显示出来
        document.getElementById("editOk").style.display="none";

     }

公诚士

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JAVAScript--增删改查案例2

html代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
复制链接

扫一扫