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

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

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

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

jQuery UI开发指南
  • 类型:前端开发大小:6.02 MB格式:PDF作者:Eric Sarrion
立即下载

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程序设计有所帮助。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

Jquery获取table中列值 相关电子书
学习笔记
网友NO.620561

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

用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.417851

修复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.791153

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} varStatus=inner tr flag=${deliverGoodsList.deliver……

网友NO.932755

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 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com