首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何通过jquery / JS从td中获取Id和两个textbox的值

通过jQuery/JS从td中获取Id和两个textbox的值,可以按照以下步骤进行:

  1. 首先,给每个td元素添加一个点击事件,以便在点击时触发获取操作。可以使用jQuery的on()方法来为td元素绑定点击事件。
代码语言:txt
复制
$('td').on('click', function() {
  // 获取Id和textbox的值
});
  1. 在点击事件中,使用jQuery的closest()方法找到当前点击的td元素的父级tr元素,然后使用find()方法找到该tr元素下的所有textbox元素。
代码语言:txt
复制
$('td').on('click', function() {
  var tr = $(this).closest('tr');
  var textbox1 = tr.find('.textbox1');
  var textbox2 = tr.find('.textbox2');
});
  1. 获取td的Id可以通过获取td元素的data属性或者其他自定义属性来实现。假设td元素的Id存储在data-id属性中,可以使用jQuery的data()方法来获取该属性的值。
代码语言:txt
复制
$('td').on('click', function() {
  var tr = $(this).closest('tr');
  var textbox1 = tr.find('.textbox1');
  var textbox2 = tr.find('.textbox2');
  var tdId = $(this).data('id');
});
  1. 最后,可以通过val()方法获取textbox的值。
代码语言:txt
复制
$('td').on('click', function() {
  var tr = $(this).closest('tr');
  var textbox1 = tr.find('.textbox1');
  var textbox2 = tr.find('.textbox2');
  var tdId = $(this).data('id');
  var value1 = textbox1.val();
  var value2 = textbox2.val();
});

综上所述,通过以上步骤可以从td中获取Id和两个textbox的值。请注意,以上代码仅为示例,实际应用中需要根据具体的HTML结构和类名进行相应的调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用

一、一个简单的基于CRUD的Web应用 在《通过ASP.NET Web API + JQuery创建一个简单的Web应用》中,我采用jQuery + ASP.NET Web API构建了一个单纯的对单一数据进行...CRUD操作的应用,对于数据在界面上的呈现,我是通过jQuery 动态生成HTML的方式实现的。...在同一个页面中,我们可以添加一个新的联系人,也可以修改和删除现有联系人信息。整个应用唯一的页面在浏览器中的呈现效果如下图所示。 ?...三、通过jQuery进行Ajax调用,利用Knockout.js进行数据绑定 我们通过ASP.NET MVC来构建Web应用,默认的HomeController定义如下,默认的Index操作仅仅是将默认的...我们采用jQuery进行Ajax调用ApiController进行联系人的获取、添加、修改和删除,数据和命令(添加、修改和删除)的绑定是通过Knockout.js来完成的。 1: <!

1.2K90
  • jQuery的Ajax实例(附完整代码)

    同时,为了实现部分更新,就需要前端和后台之间的数据交换,包括前端向后台提交数据和前端从后台读取数据。...实例 介绍了ajax的基本结构之后,就来看看下边这两个简单的例子 实例1 实现在页面上输入一个地址,点击获取经纬度,弹出该地址的经纬度。...成功回调函数success:function(data){ } 引起大家困惑和误解的,是这两个data的命名:a中的data表示的是请求接口所用的数据,b中data表示的是请求成功后接口返回的数据,即两者的内容没有直接关系...对于1中提到的请求参数address和key是请求url中数据所需要的,至于为什么是这两个参数?这个key的值是哪里得到的? 我觉得这需要大家在开发中真正的使用后,就自然会清楚它们的含义。...虽然两个实例中已经实现了简单的功能,但是需要学习的东西还有很多,还有概念不够清楚,本次笔记之后还将继续补充和修改。

    4.9K30

    jquery实现ajax_完整网页代码

    同时,为了实现部分更新,就需要前端和后台之间的数据交换,包括前端向后台提交数据和前端从后台读取数据。...实例 介绍了ajax的基本结构之后,就来看看下边这两个简单的例子 实例1 实现在页面上输入一个地址,点击获取经纬度,弹出该地址的经纬度。...------------------------------------------ 由于大家反馈的一些困惑,在这里统一解释一下: 此实例中,通过ajax请求一个可以获取地理位置的api接口,请求方式为...成功回调函数success:function(data){ } 引起大家困惑和误解的,是这两个data的命名:a中的data表示的是请求接口所用的数据,b中data表示的是请求成功后接口返回的数据,即两者的内容没有直接关系...对于1中提到的请求参数address和key是请求url中数据所需要的,至于为什么是这两个参数?这个key的值是哪里得到的? 我觉得这需要大家在开发中真正的使用后,就自然会清楚它们的含义。

    4.5K10

    通过ASP.NET Web API + JQuery创建一个简单的Web应用

    这是一个只涉及到简单CRUD操作的Web应用,业务逻辑以Web API的形式定义并以服务的形式发布出来,前台通过jQuery处理用户交互并调用后台服务。...[源代码从这里下载] 目录 一、一个简单的基于CRUD 二、通过ASP.NET Web API提供服务 三、通过JQuery消费服务 一、一个简单的基于CRUD...当页面加载的时候,所有的联系人列表被列出来。在同一个页面中,我们可以添加一个新的联系人,也可以修改和删除现有联系人信息。整个应用唯一的页面在浏览器中的呈现效果如下图所示。 ?...简单起见,我们采用静态字段作为对联系人信息的存储。ContactController定义了Get、Put、Post和Delete用于进行对联系人的获取、添加、修改和删除操作。...三、通过JQuery消费服务 我们通过ASP.NET MVC来构建Web应用,默认的HomeController定义如下,默认的Index操作仅仅是将默认的View呈现出来而已。

    868100

    ASP.Net WebForm温故知新学习笔记:二、ViewState与UpdatePanel探秘

    一、隐藏的状态—ViewState探秘 1.1 从Http的无状态说起   Http是一个无状态协议,同一个会话的连续两个请求互相不了解,它们由最新实例化的环境进行解析,除了应用本身可能已经存储在全局对象中的所有信息外...ViewState对应项中的值可以存储任何类型的值(参数是Object类型),实施上任何类型的值存储到ViewState中都会被装箱为Object类型。   ...(1)首先,我们知道AJAX的核心对象是XmlHttpRequest,那么原生态的AJAX请求的JS方法是如何写的呢?...}   (2)其次,通过查看运行页面的html,我们可以发现加入UpdatePanel后,我们的html中多了这么几个js引用。   ...通过借助jQuery Ajax+ashx可以方便地在.Net中进行Ajax开发,并且具有不错的性能,这也是我实习所在的企业中经常用到的方式。

    1.8K30

    Asp.Net MVC4入门指南(6):验证编辑方法和编辑视图

    ID=4还会将参数ID为 4的请求传递给Movies控制器的Edit操作方法。 打开Movies控制器。如下所示的两个Edit操作方法。...数据保存之后,代码会把用户重定向到MoviesController类的Index操作方法,页面将显示电影列表,同时包括刚刚所做的更新。 如果form发送的值不是有效的值,它们将重新显示在form中。...注意,为了使jQuery支持使用逗号的非英语区域的验证 ,需要设置逗号(",")来表示小数点,你需要引入globalize.js并且你还需要具体的指定cultures/globalize.cultures.js...前几行的代码会创建一个List对象来保存数据库中的电影流派。 下面的代码是从数据库中检索所有流派的 LINQ 查询。...在下一节中,您将看到如何将属性添加到Movie模型,以及如何添加一个初始设定并自动创建一个测试数据库。

    4.3K100

    ASP.NET MVC使用Bootstrap系统(2)——使用Bootstrap CSS和HTML元素

    Entity Framework DbContext对象,Index Action接受从数据库中返回Products 集合然后使用AutoMapper映射到每一个ProductViewModel对象中,...最后将它添加到打包文件中 bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.validate.js...", "~/Scripts/jquery.validate.unobtrusive.js", "~/Scripts/jquery.validate.bootstrap.js")); 注:默认情况下,ASP.NET...").Include( "~/Scripts/jquery.validate*")); 但是jquery.validate.bootstrap.js必须在jquery validate 插件后加载,...这将会让model的属性名作为生成的textbox的name,并且textbox显示的内容是model的值,最后追加了名为class的attribute,而且其值为”form-control”。

    4K40

    ASP.NET MVC使用Bootstrap系列(2)——使用Bootstrap CSS和HTML元素

    Bootstrap Buttons Bootstrap提供了许多各种不同颜色和大小的buttons,为核心的buttons提供6种颜色和4种尺寸可以选择,同样通过设置class属性来显示不同的风格: •...最后将它添加到打包文件中 bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.validate.js...", "~/Scripts/jquery.validate.unobtrusive.js", "~/Scripts/jquery.validate.bootstrap.js")); 注:默认情况下,ASP.NET...").Include( "~/Scripts/jquery.validate*")); 但是jquery.validate.bootstrap.js必须在jquery validate 插件后加载,所以我们只能显式的指定文件顺序来打包...这将会让model的属性名作为生成的textbox的name,并且textbox显示的内容是model的值,最后追加了名为class的attribute,而且其值为”form-control”。

    6.2K80

    jQuery

    $("#i1").html()的意思是:获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。     ...$("div").filter(".c1") // 从结果集中过滤出有c1样式类的,从所有的div标签中过滤出有class='c1'属性的div,和find不同,find是找div标签的子子孙孙中找到一个符合条件的标签...k2:v2})// 为所有匹配元素设置多个属性值 removeAttr()// 从每一个匹配的元素中删除一个属性     用于checkbox和radio prop() // 获取属性 注意:       ...数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length - 1。其他对象通过其属性名进行迭代。...js和jquery中的for循环也是通过他们两个来跳出当此循环或者终止循环     伏笔... .data()     任意jQuery对象都有data方法,可以保存任意值,可以用来代替全局变量

    9K20

    easy的jsp的增删改查在一个jsp页面上

    肆:async 是否异步  伍:Content-Type(内容类型),一般是指网页中存在的 Content-Type  陆:processData 默认为true,当设置为true的时候,jquery...= rows[0].id,获取到修改的id值 var PaygridPanel = $('#dg').datagrid("getPanel"); PaygridPanel.on("click", "...③先用ajax调用后台的根据id查询销售合同列表信息的方法    success:function(data){}            根据修改表格中的每一行数据的id为每一行设置值               ...(内容类型),一般是指网页中存在的 Content-Type  陆:processData 默认为true,当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data...> 查询条件 easyui-textbox获取值:$("#contractNameId").val easyui-combobox获取值分两种: 获取字典里的值

    4.6K20

    WEB入门之十五 属性和样式

    本章简介 在前面几章的示例中,凡是牵涉到属性和样式操作的,我们依然是通过传统的DOM来实现的。...本章将学习如何使用jQuery进行标签属性和CSS样式操作,jQuery提供了大量的函数来帮助开发人员简化对标签属性和CSS样式的操作。 ​...跟这两个函数很相似的还有一个text(),它是用来设置或获取innerText属性的值,即文本信息。...,语法归结如下: jQuery元素 . offset ( { top : 值, left : 值} ) 6.1.1 尺寸大小函数 尺寸通常指的是元素的宽和高,jQuery提供了height和width两个函数来获取某个元素的尺寸...本章将学习如何使用jQuery进行标签属性和CSS样式操作,jQuery提供了大量的函数来帮助开发人员简化对标签属性和CSS样式的操作。

    9310

    WEB入门之十五 属性和样式

    本章简介 在前面几章的示例中,凡是牵涉到属性和样式操作的,我们依然是通过传统的DOM来实现的。...本章将学习如何使用jQuery进行标签属性和CSS样式操作,jQuery提供了大量的函数来帮助开发人员简化对标签属性和CSS样式的操作。...跟这两个函数很相似的还有一个text(),它是用来设置或获取innerText属性的值,即文本信息。...,语法归结如下: jQuery元素 . offset ( { top : 值, left : 值} ) 6.1.1 尺寸大小函数 尺寸通常指的是元素的宽和高,jQuery提供了height和width两个函数来获取某个元素的尺寸...本章将学习如何使用jQuery进行标签属性和CSS样式操作,jQuery提供了大量的函数来帮助开发人员简化对标签属性和CSS样式的操作。

    6010
    领券