首页
学习
活动
专区
工具
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应用

一、一个简单基于CRUDWeb应用 在《通过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

jQueryAjax实例(附完整代码)

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

3.8K30

jquery实现ajax_完整网页代码

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

4.5K10

浅谈Django前端后端传递问题

前端后端传问题总结 前端传给后端 通过表单传 1、通过表单get请求传 在前端当通过get方式传时,表单标签name将会被当做action地址参数 此时,在后端可以通过get请求相应...post请求传 当前端通过post传时,在视图中可以通过POST请求拿到对应表单name属性对应value 通过ajax传 POST ———————————– 通过ajaxpost请求可以将...html页面的传到对应视图函数,在后端可以通过request.POST.get(键)获得前端通过ajaxdata,request.POST获取ajax传递所有数据 注意:如果前端dataType...可以在标签定义一个属性动态生成 <span id=”num_{{ good.id }}” </span 此时可以在绑定时间函数传入一个同样参数,就可以在js获取当前被点击标签...).html(data.data.c_num) } ajax不能通过$(this)获得当前触发标签,但是可以在ajax之外将对象获取,在ajax函数中使用。

4.2K20

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

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

837100

python 学习 第八篇 jquery

包含内容: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效动画 HTML DOM 遍历修改 AJAX 1:下载 jQuery 共有两个版本... jQuery 可供下载:一份是生产版本jQuery.min.js(最小化压缩过),另一份是开发版jQuery.js(未压缩供调试或阅读)。...2:如何导入jQuery——直接在html标签导入即可(生产环境下,为了提高页面加载速度,通常讲js文件放到页面最下面) <script type="text...在console<em>中</em>输入 $('#loginform').serialize()  作用是把表单<em>中</em><em>的</em>所有<em>值</em>都拿到 $:表示<em>jquery</em>        loginform:表示选择器         <em>id</em>:...)    #<em>获取</em>或设置标签样式<em>值</em> 例子:<em>通过</em><em>jquery</em>对html元素进行操作 ?

93220

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.7K30

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.2K100

ASP.NET MVC使用Bootstrap系统(2)——使用Bootstrap CSSHTML元素

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属性名作为生成textboxname,并且textbox显示内容是model,最后追加了名为classattribute,而且其为”form-control”。

3.7K40

ASP.NET MVC使用Bootstrap系列(2)——使用Bootstrap CSSHTML元素

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属性名作为生成textboxname,并且textbox显示内容是model,最后追加了名为classattribute,而且其为”form-control”。

6.1K80

使用SSM+easyui做个简单增删改查

resource/css/pur_supplier.css"> <script type="text/javascript" src="${ctx }/resource/plugins/easyui/<em>jquery</em>.min.<em>js</em>..."> <script type="text/javascript" src="${ctx }/resource/plugins/easyui/<em>jquery</em>.easyui.min.<em>js</em>...它是一个函数,有三个参数,分别是value,row,index value:表示当前单元格<em>中</em><em>的</em><em>值</em> row:表示当前行 index:表示当前行<em>的</em>下标 可以使用return返回想要<em>的</em>数据显示在单元格<em>中</em>...<em>td</em>> <input name="contractName" id="editContractName" class="easyui-textbox...属性 formatter 属于列参数,表示对于当前列数据进行格式化操作,它是一个函数,有三个参数,分别是value,row,index value:表示当前单元格

1.9K30

jQuery

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

8.9K20

easyjsp增删改查在一个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

asp:UpdatePanel客户端回传事件管理

asp:UpdatePanel客户端回传事件管理 Asp:UpdatePanel是在Asp.Net WebForm一个局部刷新控件,虽然很好用,但是在使用过程却发现如果局部刷新数据需要再次使用页面...js进行格式化,页面则会乱套,所以在这里我们需要对UpdatePanel回传过程进行控制。...Sys.WebForms.PageRequestManager类 管理服务器 UpdatePanel 控件在浏览器部分页更新,并通过使用客户端脚本定义属性、事件方法以自定义 Web 页。...{ get; set; } public string Name { get; set; } } } 运行结果: 效果就是,上面的通过搜索获取数据进行展示,然后通过 javascript...这个是因为当我们点击搜索按钮之后,新获取数据被呈现在页面上,但是我们初始化表格样式javascript代码并没有再次执行,所以我们表格样式会出现下面的这种情况: 如果我们需要通过javascript

3.6K30
领券