使用js实现表的 “增删改查上下移动” 功能

最新推荐文章于 2022-09-14 00:49:58 发布

草莓煎饼

最新推荐文章于 2022-09-14 00:49:58 发布

阅读量1k

点赞数 5

分类专栏： js 文章标签： html html5 css js

本文链接：https://blog.csdn.net/m0_46862838/article/details/120477931

版权

在这里插入图片描述
要实现图片中的的效果，废话不多说直接上代码
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>
  <link rel="stylesheet" type="text/css" href="data.css">
</head>
<body>
  <div>
  //所需要的添加栏
    <form method="post" class="form">
      <span>姓名</span><input type="text" /><br />
      <span>年龄</span><input type="text" /><br />
      <span>性别</span><input type="text" /><br />
      <span>学号</span><input type="text" /><br />
      <p><button type="button" class="addBtn LanEdit" onclick="addEle()">添加</button></p>
      <p><button type="button" class="addBtn LanSave" onclick="updateEle2()">保存</button></p>
    </form>
  
  </div>
  //查询框
  <div class="seach">
    <input type="text" class="seachText" /><button type="button" class="seachClick" onclick="seachData()">查询</button>
  </div>
  //表格
  <table id="tab">
    <tr>
      <td>序号</td>
      <td>姓名</td>
      <td>年龄</td>
      <td>性别</td>
      <td>学号</td>
      <td>操作</td>
      <td>移动</td>
    </tr>        
  </table>



</body>
<script src="data01.js"></script>
<!-- // 当添加栏点击保存时，
        //1、添加按钮变成保存按钮，保存以后再次变回添加按钮
        //2、列表栏数据改变
        //3、存储的数据改变
        //4、操作的保存改成编辑
-->
</html>

css代码

* {
   
  padding: 0;
  margin: 0;
}

div {
   
  width: 300px;
  height: 300px;
  background-color: antiquewhite;
  display: inline-block;
  margin: 20px;
}

span {
   
  margin: 10px;
}

input {
   
  width: 200px;
  height: 30px;
  margin: 10px;
}

.addBtn {
   
  width: 90px;
  height: 30px;
  margin-left: 100px;
  margin-top: 20px;
  background-color: coral;
  color: #fff;
  border: none;
  cursor: pointer;
}

#tab {
     
  display: inline-block;
  width: 70%;
  height: 300px;
  position: absolute;
  left: 500px;
  margin-top: 70px;
}

#tab tr td {
     
  display: inline-block;
  min-width: 90px;
  height: 30px;
  line-height

最低0.47元/天解锁文章

草莓煎饼

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
使用js实现表的 “增删改查上下移动” 功能

要实现图片中的的效果，废话不多说直接上代码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"&.
复制链接

扫一扫