当前位置:首页 > jQuery技术文章 > jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路

jQuery学习笔记(4)--怎样从Jquery获取table中列值

  • 发布时间:
  • 作者:码农之家原创
  • 点击:122

这篇文章主要知识点是关于jQuery、table、列值、jQuery实现获取table表格第一列值的方法 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下相关资源

jQuery UI开发指南

《jQuery UI开发指南》 是jQuery UI的快速开发指南,全面介绍jQuery UI如何改进HTML页面展示,内容包括jQuery UI 1.8版本的下列扩展特性:选项卡管理、折叠菜单、对话框、按钮、进度条、滑块、日历

查看详情

jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路

花了一晚上的时间解决了一个看似很容易的问题。今晚做的这个东西中由于要获取某列中的一个ID值。如果是用平常的那种JS传值的方式此问题就不存在,但是由于此次用到的都是jquery插件,包括各种弹出框,用JS传值就得用JS那丑陋的弹出框,所以,你懂得。

网上找了很多方法,用起来都不行,后来想到了jquery中的鼠标事件,可以在鼠标经过table时,获得当前行与列的值。页面如下所示:
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路 
具体操作就是点击“删除”按钮,然后调用jquery插件页面,这时候需要获得相应行的“ID”进行操作。我的方法是:

先定义一个行数与列数的全局变量,然后在鼠标经过按钮时获得此行的行数与列数并付给此全局变量:
 

var trNum;
var tdNum;
$(function(){
//定义一个鼠标经过事件
$('#users td').hover(
function(){
//获得table的行号
trNum = $(this).parent().parent().find('tr').index($(this).parent()[0])+ 1;
//获得table的列号
tdNum = $(this).parent().find('td').index($(this)[0])+ 1;
}
);

其中,“users”为此table的ID.然后再根据此ID进行业务处理,如下所示:
 

01.//点击“弹出框”选择“确定”后的业务处理
$("#dialog-confirm").dialog({
autoOpen:false,
resizable:false,
height:150,
modal:true,
buttons:{
"确定":function(){
var au_id = $('#users').find('tr:eq(' + (trNum) + ')').find('td:eq(0)').text(); //获得对应第一列的ID值
//业务处理省略
……
},
"取消":function(){
$(this).dialog("close");
}
}}
);

小问题凝聚着大智慧,通过解决问题提高自己学习能力,解决问题的能力,是我一直崇尚的真理!

jQuery实现获取table表格第一列值的方法

本文实例讲述了jQuery实现获取table表格第一列值的方法。分享给大家供大家参考,具体如下:

先来看看运行效果截图:

jQuery实现获取table表格第一列值的方法

完整代码如下:

<!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>
<title>无标题页</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $("#Button1").click(function(){
    var cols="";
    $("#tb tr").each(function(){
      var text = $(this).children("td:first").text();
      cols+=text+"|";
    })
    cols=cols.length>0?cols.substring(0,cols.length-1):"";
    alert(cols);
  })
})
</script>
</head>
<body>
  <input id="Button1" type="button" value="button" />
  <table id="tab1" border="1" >
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Address</th>
    </tr>
    <tbody id="tb">
    <tr>
      <td>11</td>
      <td>leaf</td>
      <td>gz</td>
    </tr>
    <tr>
      <td>22</td>
      <td>flower</td>
      <td>gz</td>
    </tr>
    </tbody>
  </table>
</body>
</html>

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

以上就是本次给大家分享的关于jQuery的全部知识点内容总结,大家还可以在下方相关文章里找到jQuery学习笔记(4)--怎样从、 jquery delay()知识点详解、 JavaScript的jQuery库中表单转、 等jQuery文章进一步学习,感谢大家的阅读和支持。

上一篇:同域jQuery(跨)iframe操作DOM的实例代码讲解

下一篇:jquery幻灯片效果实例代码

展开 +

收起 -

Jquery获取table中列值 相关内容
JavaScript和jQuery实战手册

JavaScript可以大大改进网页的动画、交互性和视觉效果,但学习该门语言不太容易。本书通过一步步引导JavaScript基础知识,展示了如何使用jQuery(即预先写好的JavaScript代码库)来节省时间和精

查看详情
jQuery实战从入门到精通

本书以理论与实践相结合的方式详尽讲述了 jQuery 基础、jQueryUI、jQuerMobile 相关知识和实战开发技术,适合作为jQuery 入门、jQuery Ajax、jQuery UI、jQuery Mobile 开发及案例方面的自学用书

查看详情
疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战 查看详情
jQuery Mobile从入门到精通

《jQuery Mobile从入门到精通》 一书以实例驱动的方式,用近百个实战案例讲述了jQuery Mobile及APP移动开发的相关知识,并通过5个项目案例展现开发流程。全书分为4部分,共19章:第1部分为移动开

查看详情
Web前端开发HTML5/CSS3/jQuery/AJAX从学到用完美实践

本书是著名前端开发大牛阮晓龙老师爽作,HTML5、CSS3、jQuery、AJAX一站搞定,一本真正好学、实用又精彩的书,讲述了用HTML5 CSS3设计构建网站的必备知识,欢迎下载

查看详情
jQuery实战

jQuery实战(第三版) 适用于想深入学习jQuery的Web开发人员,jQuery是互联网上流行的JavaScript框架。本书的目标是希望读者成为Web高级开发人员,无论起点如何。本书深入介绍了整个jQuery框架,此外

查看详情
jQuery EasyUI开发指南

使用Java开发软件的开发人员一定会接触到前端开发,而前端开发有一个流行趋势,那就是插件开发。jQuery EasyUI是目前Java Web领域流行的插件开发工具。《jQuery EasyUI开发指南》主要讲述EasyUI各种

查看详情
Jquery获取table中列值 学习笔记
网友NO.851599

jQuery插件DataTables分页开发心得体会

写Blog目的:不是为人气,只是留份笔记;啰嗦不要紧,只怕有遗漏,以后想不起来。 官网:https://datatables.net/ 中文官网:http://datatables.club/ 开发环境:Python 3.6.0、Anaconda 4.3.1、Django、JetBrains PyCharm 2017.1.5 按我项目的开发过程简单整理。 1、第一版本,无分页。 在此之前有用到过DataTables(更多的是easyui中的Datagrid,另之前服务端是PHP),因此想着前端/客户端差异不大,服务端反正都是按规范格式返回JSON串(Django的代码后续再整理)。另外,刚开始也没想着表格分页,只是有三个字段排序需求(排序已在服务端做好并返回)。 DataTables基础代码: //表格的HTML代码略过$('#dtList').DataTable({ "bPaginate": false, //翻页功能 "bInfo": false,//页脚信息 "ordering": false, //不排序 "searching": false, //搜索框,不显示 "bLengthChange": false, //改变每页显示数据数量,不显示 "iDisplayLeng……

网友NO.111126

用Jquery选择器计算table中的某一列某一行的合计

利用Jquery选择器,计算table中的某一列,某一行的合计,非常方便。下面以计算行合计为例: 核心算法: $('#tableId tr').each(function() { $(this).find('td:eq(columnIndex)').each(function() { totalAmount += parseFloat($(this).text());})}); 下面是案例代码 !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 meta http-equiv="Content-Type" content="text/html; charset=utf-8" / titleJquery计算table行合计/title script id="jquery_183" type="text/javascript" class="library" src="http://runjs.cn/js/sandbox/jquery/jquery-1.8.3.min.js"/script script type="text/javascript" $(document).ready(function() { var totalRow = 0 $('#mytable tr').each(function() { $(this).find('td:eq(2)').each(function(){ totalRow += parseFloat($(this).text()); }); }); $('#totalRow').append('td合计/tdtd/tdtd'+totalRow+'/tdtd/td'); }); /script /head body table id="……

网友NO.276475

修复jQuery tablesorter无法正确排序的bug(加千分位数字后)

找到函数: function getElementText(config, node) {var text = "";if (!node) return "";if (!config.supportsTextContent) config.supportsTextContent = node.textContent || false;if (config.textExtraction == "simple") {if (config.supportsTextContent) {text = node.textContent;} else {if (node.childNodes[0] node.childNodes[0].hasChildNodes()) {text = node.childNodes[0].innerHTML;} else {text = node.innerHTML;}}} else {if (typeof(config.textExtraction) == "function") {text = config.textExtraction(node);} else {text = $(node).text();}}return text;} 把上邊的function改成下邊的即可: function getElementText(config, node) {var text = "";if (!node) return "";if (!config.supportsTextContent) config.supportsTextContent = node.textContent || false;if (config.textExtraction == "simple") {if (config.supportsTextContent) {text = node.textContent;} else {if (node.childNodes[0] node.childNodes[0].hasChildNodes()) {text = node.childNodes[0].innerHTML;} else {text = node.innerHTML;}}} else {if (ty……

网友NO.768136

jQuery中table数据的值拷贝和拆分

在开发的过程中,经常会遇到弹出框显示前一页table列表的情况,这时候会有好多方法来来解决,有的人可能会说重新查一遍数据显示,有的人会说直接用js将值拷贝过去,然后再修改,不过现在就介绍怎么用jquery将值拷贝到第二页并拆分拷贝的值。 母页显示数据格式如下: div class="materialCode stdtable" h2发货情况/h2 ul class="theadUl clearfix" li class="td1"发货批次/li li class="td2"商品/li li class="td3"发货数量/li li class="td4"剩余数量/li li class="td5"收货数量/li li class="td6"收货状态/li li class="td7"操作/li /ul table id="table1" thead tr th class="td1"/th th class="td2"/th th class="td3"/th th class="td4"/th th class="td5"/th th class="td6"/th th class="td7"/th /tr /thead tbody c:forEach var="deliverGoodsList" items="${orderDetail.deliverGoodsList}" varStatus="outer" c:forEach var="deliverGoodsDetaiList" items="${deliverGoodsList.deliverGoodsDetaiList}" varSta……

网友NO.177903

jQuery插件DataTable使用方法详解(.Net平台)

上一篇随笔提到了MvcPager,最近用到了一款前端JQ插件------DataTable(简称DT),很好用。 DT是一款前端插件,和后端完全分离开,就这点来看,我就特别喜欢。 一.使用DT,需要以下支持 js:jq+jquery.dataTables.min.js 二、页面上进行引入js,直接使用DT功能 前端代码: !DOCTYPE htmlhtmlhead meta charset="utf-8" meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" / title用户列表/title link href="~/Content/Scripts/h-ui/css/H-ui.min.css" rel="stylesheet" / link href="~/Content/Scripts/h-ui.admin/css/H-ui.admin.css" rel="stylesheet" / link href="~/Content/Scripts/Hui-iconfont/1.0.8/iconfont.css" rel="stylesheet" / style .page-container { padding: 10px; } .operation { background: #EFEEF0; padding: 3px; } .search { background: #EFEEF0; padding: 5px; margin-top: 5px; } .table { margin-top: 10px……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757