通过jQuery实现可以修改的表格

最新推荐文章于 2021-12-04 14:16:17 发布
最新推荐文章于 2021-12-04 14:16:17 发布
阅读量119 收藏
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52132674/article/details/112437155
版权 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/jquery-1.11.3.js"></script>
        <style>
            *{
    
                padding: 0;
                margin: 0;
            }
            .tab{
    
                margin: 0 auto;
                width: 800px;
                border: 1px solid #34495e;
                border-collapse: collapse;
            }
            th,td{
    
                height: 30px;
                width: 180px;
                border: 1px solid #34495e;
                box-sizing: border-box;
            }
            tr:nth-child(1){
    
                background
最低0.47元/天 解锁文章
Mr_LuoL
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现表格的即时编辑（增，删，改，查）
得意小门生的博客
08-15 713
演示地址：https://wow.techbrood.com/fiddle/54101?vm=full
jquery 点击表格变为input可以修改无刷新更新数据
freejs
03-04 418
之前已经发了2篇类似的文章《点击变td为input更新》和《jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格》 这篇功能是一样的，不过实用性可能比不上前面的文章     演示   PHP Code &lt;table&gt;   &lt;Tr&gt;&lt;Td colspan="2"&gt;如果本例看不到数据请先添加一条记录,点击&l...
jQuery实现表格的增加、修改、删除、保存。
铦鹞
12-11 5122
实现表格行数的增加以及修改表格内容，同时表格行数可自由拖动（引用了jquery-ui插件）。 1.文件列表 2.实现效果 3.css 实现一个标准的窗体划分，把整个界面分成上下中三部分，然后把中间再分为三块。 ​ .all/*全屏，高度不可为百分比，设置左浮动（全体），颜色区分不同块*/ { width:100%; height:700px; ...
Jquery可修改表格
weixin_34279061的博客
04-18 92
真正的代码： 发 &lt;th&gt;标题 若一个两列的表格。 编号。姓名 对编号列可以进行修改。 则。对应的TD是偶数。0，2，4，6，8. 所以不一定要用ID来对应。如果是单纯的HTML的话。可以用Jquery来获得 EVEN的偶数TD的DOM集合 var numTD=$("table td:even");//返回一个JQUERY对象。封装4...
Jquery对table表格的动态修改
06-05 234
效果图： 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <script type="text/java...
PHP+jQuery实现双击修改table表格功能示例
10-17
主要介绍了PHP+jQuery实现双击修改table表格功能,涉及php数组读取、遍历及jQuery动态响应修改页面元素属性相关操作技巧,需要的朋友可以参考下
jQuery实现表格的增加、修改、删除、保存代码
12-30
jQuery实现表格的增加、修改、删除、保存代码
利用jQuery实现可以编辑的表格
10-25
在前台的表格中单击单元格便可修改其中的内容，回车键保存修改的内容，esc撤销保存的内容
jQuery 实现双击编辑表格功能
12-09
下面用简单方法实现的简单表格编辑功能: 简单的HTML代码略过了,下面是js实现过程 [removed] $(".tables").on("dblclick","td",function(){ if($(this).children("input").length>0){ return false; } var tdDom...
jquery实现点击文字可编辑并修改保存至数据库
09-03
jquery实现点击文字时提供信息编辑并修改修改信息保存至数据库
jQuery表格点击修改内容
Timber_wood的博客
04-27 926
ID 姓名 班级 性别 1 秦浩 3年级 男 2 李萌 3年级 女 3 李浩楠 3年级 男
使用jQuery对表格实现增、删、改、查
qq_54000867的博客
12-04 5867
需求： 下面输入框输入框输入数据，点击增加按钮，将数据添加至表格末尾，id实现自增 在上面输入框输入姓名，点击查询按钮，过滤出指定姓名数据显示 点击删除超链接，删除对应的行 点击修改超链接，修改超链接文本变为保存，同时ID、姓名、年龄变成输入框可编辑状态，点击保存超链接，如果输入框为空，将提示不能为空，输入框不为空时，修改后的数据将保存至表格并显示，同时保存超链接文本变成删除超链接 运行结果 HTML代码： <input type="text" /> <input t
jQuery实现可编辑表格
BarryLee的博客
10-15 6098
可编辑表格，这个东西听起来挺高大上，其实用jQuery来实现，了解一下思路，就很简单 1.事实上是编辑td里面的内容，所以给他一个双击事件 2.双击完了这个td将其变为一个input，里面的值还保留着 3.最后就是失去焦点的时候还原，就欧克了 &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEn...
jQuery实现表格可编辑
qq_35937045的博客
08-26 770
分析:html中的table表格是不能直接在表格中更改数据的，实现表格数据可编辑做法是在单元格中插入一个文本框，在文本框中实现数据的编辑功能，再将文本框中输入的值设置为单元格的文本值。 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></ti...
JQuery实现可编辑的表格
weixin_34100227的博客
12-24 83
点击表格后可直接编辑，回车或鼠标点击页面其他地方后编辑生效，按Esc可取消编辑  第一种单击表格可以编辑的方法 //相当于在页面中的 body标签加上onload事件$(function() {    //找到所有的td节点    var tds = $("td");    //给所有的td添加点击事件    tds.click(function() {        //获得当前点击的对象 ...
Jquery 鼠标点击表格可以编辑内容
xiaodanpeng的专栏
03-11 2540
JS 代码： type="text/javascript" > $(function() { //找到表格的内容区域的奇数行,设定其样式 $("tbody tr:even").css("background-color", "#ECE9D8"); //找到所有学号的单元格 var numTd = $("tbody td:even"); //给这些单元
js和jQuery实现双击表格变为可编辑状态
zk_1325572803的博客
03-30 8436
双击单元格，将其变为文本框
jquery实现表格增删改查
最新发布
05-31
好的，以下是一个简单的示例代码，用于实现表格增删改查的功能，使用 jQuery 和 AJAX 技术： HTML 代码： ``` <table id="myTable"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Age</th> <th>Actions</th> </tr> </thead> <tbody> <!-- 表格数据会动态生成 --> </tbody> </table> <form id="addForm"> <input type="text" name="name" placeholder="Name"> <input type="number" name="age" placeholder="Age"> <button type="submit">Add</button> </form> <form id="editForm"> <input type="hidden" name="id"> <input type="text" name="name" placeholder="Name"> <input type="number" name="age" placeholder="Age"> <button type="submit">Update</button> </form> ``` jQuery 代码： ``` // 显示所有数据 function showData() { $.ajax({ url: 'api.php', // 后端接口地址 type: 'GET', dataType: 'json', success: function(data) { var tbody = $('#myTable tbody'); tbody.empty(); // 先清空表格数据 $.each(data, function(index, item) { var tr = $('<tr>').appendTo(tbody); $('<td>').text(item.id).appendTo(tr); $('<td>').text(item.name).appendTo(tr); $('<td>').text(item.age).appendTo(tr); var td = $('<td>').appendTo(tr); $('<button>').text('Edit').on('click', function() { // 点击 Edit 按钮时，显示编辑表单 $('#editForm [name=id]').val(item.id); $('#editForm [name=name]').val(item.name); $('#editForm [name=age]').val(item.age); }).appendTo(td); $('<button>').text('Delete').on('click', function() { // 点击 Delete 按钮时，删除该行数据 $.ajax({ url: 'api.php?id=' + item.id, type: 'DELETE', success: function() { showData(); // 数据删除成功后，重新显示所有数据 } }); }).appendTo(td); }); } }); } // 添加数据 $('#addForm').on('submit', function(event) { event.preventDefault(); // 阻止表单提交 $.ajax({ url: 'api.php', type: 'POST', data: $(this).serialize(), success: function() { // 数据添加成功后，清空表单并重新显示所有数据 $('#addForm')[0].reset(); showData(); } }); }); // 更新数据 $('#editForm').on('submit', function(event) { event.preventDefault(); // 阻止表单提交 $.ajax({ url: 'api.php', type: 'PUT', data: $(this).serialize(), success: function() { // 数据更新成功后，清空表单并重新显示所有数据 $('#editForm')[0].reset(); showData(); } }); }); // 页面加载完成后，显示所有数据 $(document).ready(function() { showData(); }); ``` 以上代码中，我们使用了一个名为 `api.php` 的后端接口，用于处理增删改查的请求。你需要根据实际情况自行编写这个接口。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值