jquery对表格数据删除

最新推荐文章于 2021-10-04 17:35:25 发布
最新推荐文章于 2021-10-04 17:35:25 发布
阅读量798 收藏
点赞数
文章标签： jquery table function input webform image
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuningshiwoa/article/details/7354143
版权
 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="JQueryDOM.WebForm2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
    .table1{ border-style:inset;
    border-width: 2px; width:500px;border: solid 1px;}
    image{ width:60px; height:60px;}
    td{ text-align:center; }
   
    .imgclass{ position:absolute; border:solid 1px #eee; width:200px; height:350px; display:none;}
    </style>
    <script src="Jquery1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#chkall').click(function () {
                //                $('input[type=checkbox]').attr('checked', this.checked);
                $('table :checkbox').attr('checked', this.checked);
                //                if (this.checked) {
                //                    $('table tr td input[type=checkbox]').attr('checked', true);
                //                }
                //                else {
                //                    $('table tr td input[type=checkbox]').attr('checked', false);
                //                }

            })

            $('#removenode').click(function () {
                var ck = $('#form1 :checkbox:not(#chkall)');
                ck.each(function (index) {
                    if (this.checked) {
                        $(' table tr[id=' + this.value + ']').remove();
                    }
                })
            })

            $('table tr td image').mousemove(function (e) {
                $('#imgshow').attr('src', this.src).css({ top: (e.pageY + 5), left: (e.pageX + 5) }).show();
            })

            $('table tr td image').mouseout(function () {
                $('#imgshow').hide();
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
   <table class="table1">
   <tr><th>操作</th><th>编号</th><th>封面</th><th>作者</th><th>数量</th><th>单价</th></tr>
   <tr  id="0"><td><input type="checkbox" value="0" /></td><td>001</td><td><image src="images/林心如.jpg" /></td><td>王蕾</td><td>23</td><td>23</td></tr>
   <tr id="1"><td><input type="checkbox" value="1" /></td><td>002</td><td><image src="images/林志玲.jpg" /></td><td>扬斐</td><td>34</td><td>34</td></tr>
   <tr id="2"><td><input type="checkbox" value="2" /></td><td>003</td><td><image src="images/林志颖.jpg" /></td><td>交玉从</td><td>22</td><td>45</td></tr>
   </table>
   <table>
   <tr><td>全选<input type="checkbox" id="chkall" /></td><td><input type="button" value="删除"  id="removenode"/></td></tr>
   </table>
   <img class="imgclass" id="imgshow" />
    </form>
</body>
</html>

liuningshiwoa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
22.6:Python如何删除MySQL数据库表中的数据？
小兔子平安
05-21 255
删除MySQL数据库表中的数据是一个常见的数据库操作任务，需要注意一些细节问题。在Python中，我们可以使用多种方法来完成这个任务，例如Python MySQL Connector、ORM框架、pymysql库和DBUtils库等。在选择方法时，需要根据实际情况权衡各方面因素，并考虑到一些可能被忽视的细节，从而保证数据库操作的安全性和效率。同时，还需要注意代码的可读性和可维护性，以提高开发效率和代码质量。
jquery实现表格删除功能
温柔女魔头
01-31 769
HTML &lt;body&gt; &lt;div&gt; &lt;button class="btn1"&gt;全部删除&lt;/button&gt; &lt;button class="btn2"&gt;添加&lt;/button&gt; &lt;table&gt; &lt;thead&gt; &lt;tr&gt;
jquery实现表格的添加和删除
LHH201016的博客
07-28 599
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-equiv="X-UA-Compatible"content="ie=edge"> <title&...
JQuery对表格行的添加删除
03-20
JQuery对表格行的添加删除,如添加一行，删除一行
jquery对table中各数据的增加、保存、删除操作示例
12-12
像这种页面，我们往往不是通过提交表单来处理这些数据，因为如果在后台去遍历处理这些大量的数据是非常繁琐的；比较好的做法是在前台页面中将数据以对象形式保存在json中，然后在后台直接将json转换成我们需要的对象，这样我们的直接可以处理对象了！ 添加按钮 代码如下: <input name=”button” type=”button” value=”添加” onClick=”addRowForPswdBasicFillTemplate(‘pswd_basic_fill_template’)”> table id是pswd_basic_fill_template 添加方法 代码如下: func
python删除mysql数据库_python数据库-MySQL数据库的增删改查基本操作(49)
weixin_39814482的博客
12-02 144
一、数据库基础表 table：数据是保存在表内，保存在一个表内的数据，应该具有相同的数据格式行：行用于记录数据记录：行内的数据列：列用于规定数据格式字段：数据的某个列主键：唯一地标识表中的某一条记录，不能空，不能重复二、数据库的数据类型1、数字类型整数: tinyint、smallint、mediumint、int、bigint浮点数: float、double、real、decimal日期和时间...
jQuery函数可以清除所有表格数据
09-11 185
非常有用的jQuery功能清除我对卡尔斯威德伯格的网站上找到的所有形式的数据。 它只是从形式包括文本输入框，选择框，单选按钮，复选框等等......有两个版本的第二个版本可能更加有用，你可以直接将其应用到DOM元素作为一个jQuery函数删除所有数据。 function clearForm(form) { // iterate over all of the inputs for the ...
jquery表格的维护和删除
zhang245754954的博客
02-03 378
最近学习jquery，可以利用js函数来实现对表格的维护和删除，相对于javascript简单方便首先看看页面的实现效果<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Conten
jquery实现添加删除表格
qq_48294048的博客
10-04 1893
css: <style> div { width: 500px; line-height: 30px; font-size: 18px; margin: 20px auto; border: 1px solid #000; padding: 20px; box-sizing: border-box;
jQ实现表格的添加和删除
Alicesa的博客
08-29 959
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格添加删除</title> </head> <style> body {
jQuery+Datatables实现表格批量删除功能【推荐】
12-29
Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。 最近遇到这样的需求要求把表格批量删除。下面通过实例代码给大家介绍下。 1：点击全选的选择框CheckBox，选中以下列表中所有的选择框 2：再次点击全选的选择框CheckBox，不选中以下列表中所有的选择框 3：单选某个选择框 如图所示： http://recordit.co/GLj5a5BWo9 简单代码demo： <thead> <tr role=row class=heading> <th xss=removed> 全选 <in
asp.net无刷新操作表格（增加，删除行），包括后台如何取值
01-29
asp.net无刷新操作表格（增加，删除行），包括后台如何取值 //插入空白行 function insertRow(){ var table=document.getElementById('TestTable'); var tr=table.insertRow(); var datalength=table.rows.length-1; var dataIndex=datalength-1; var TextIDCell=tr.insertCell(); TextIDCell.innerHTML=""; //增加按钮 var BtAddCell=tr.insertCell(); BtAddCell.innerHTML=" "; //删除按钮 var BtDeleteCell=tr.insertCell(); BtDeleteCell.innerHTML=" "; setButtonAction(); }
jquery操作表格增加删除
12-10
jquery操作表格增加删除
JQuery获取表格数据示例代码
01-19
有这样一个表格： 点击删除执行保存，需要执行onclick事件SaveItem(“<%#Eval(“ID”)>”,this); 在JS中 代码如下: function SaveItem(id,btn) { var tbl = $(btn).parent().parent().parent(); //...
原生JS和JQuery动态添加、删除表格行的方法
10-24
主要介绍了原生JS和JQuery动态添加、删除表格行的方法,涉及javascript针对页面元素的动态操作技巧,需要的朋友可以参考下
jQuery表格添加行数据特效代码
03-20
jQuery表格添加行数据代码是一款可以在行内添加编辑删除的表格代码。
jQuery对table表格进行增删改查
01-19
最近要处理一些前端的工作，重新学习了一下jQuery，感觉还是那么的锋利啊！！！ 总结了一下对table的增删改查，写一篇留着以后自己recode。 1.首先我自己写了一个简单的div布局。 2.实现几个用标签做的按钮的功能 ...
python中删除Mysql中的数据行_通过python删除mysql中的行
weixin_39773158的博客
01-19 992
我试图通过python在mysql中编写一个表：我想在MYSQL中创建表，但是删除超过3行的行，换句话说，我只想要3行。例如emp_no Num1 Num2 Num31 1 2 32 1 2 33 1 2 3这些应该删除^{pr2}$我的代码是：from __future_...
jQuery你不得不知的知识点（jQuery入门详细教程）
轻松玩编程
05-15 472
“正确的态度既然是一种品质，它就不能靠一时兴起的冲动，更不能急于求成。它应渗透在我们生活的每一点一滴当中，成为我们日常生活的一部分。” 你好，我是梦阳辰！下面让我们一起走进jQuery的世界吧！ 01.jQuery概述 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能.
jquery实现表格内点击按钮删除该行数据
最新发布
05-24
可以通过以下步骤实现： 1. 给表格中的每一行添加一个删除按钮，可以使用HTML代码实现： ```html <tr> <td>数据1</td> <td>数据2</td> <td><button class="delete-btn">删除</button></td> </tr> ``` 2. 使用jQuery绑定按钮的点击事件，获取该行的索引，并从表格中删除该行： ```javascript $(document).on("click", ".delete-btn", function() { // 获取当前行 var $row = $(this).closest("tr"); // 获取当前行的索引 var index = $row.index(); // 从表格中删除该行 $row.remove(); }); ``` 这样，当用户点击某一行的删除按钮时，该行将被从表格中删除。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值