jquery-演练-表格的模态框新增与点击删除功能

最新推荐文章于 2021-05-09 16:22:40 发布

鲸鱼编程pyhui

最新推荐文章于 2021-05-09 16:22:40 发布

阅读量554

点赞数

本文链接：https://blog.csdn.net/ifubing/article/details/99692737

版权

初始代码

https://cloud.189.cn/t/yqMRVnraEjQr (01开始)

代码如下

<!DOCTYPE html>
<!--作者：pyhui-->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

</head>
<body>

<a href="">添加信息</a>

<table border="1">
    <tr>
        <td>序号</td>
        <td>姓名</td>
        <td class="action">操作</td>
    </tr>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td class="action">删除</td>
    </tr>

</table>


</body>
</html>

界面如下

在这里插入图片描述

需求效果

一，新增行信息

点击添加信息，弹出模态框

模态框中只用输入姓名，然后提交

提交后，会自动在表上新增一行，序号自增1
在这里插入图片描述

二，当点击删除的时候，会把当前行给删除掉

三，操作列中新增 编辑功能

点击编辑，弹出模态框，上面有当前行的相关信息，当修改后提交，会改变内容

在这里插入图片描述

思路分析，与解题过程：

https://blog.csdn.net/ifubing/article/details/99692945

鲸鱼编程pyhui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery-演练-表格的模态框新增与点击删除功能

初始代码https://cloud.189.cn/t/yqMRVnraEjQr (01开始)代码如下<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Title</titl...
复制链接

扫一扫