talbe 取值整理(自用)

于 2018-03-23 15:39:32 发布
阅读量282 收藏
点赞数 1
文章标签： table td  table 取值 table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011155153/article/details/79668437
版权
<!DOCTYPE html>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<html>


<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>  
<div class="col-md col-sm divdata">
<input value="2" />
<table class="table_data convert_width tblaa"> 
<tbody>
<tr> 
<th>挑选信息</th>
<th>初配方版本</th>
<th>原烟投入（担）</th>
<th>产出挑烟（担）</th>  
<th>与初配方比例对比</th>
<th>中华线水分AVG</th> 
<th>中华线温度AVG</th>  
<th>中华线温度AVG</th>  
<th>中华线水分AVG</th>  
<th>选叶合格率AVG</th>
</tr>  
<tr>
<td class="aa">1</td>  
<td>2</td>  
<td>3</td>  
<td>4</td>  
<td>5</td> 
<td>6</td> 
<td>7</td>  
<td>8</td> 
<td>9</td> 
<td>10</td> 
</tr> 
<tr>
<td>1866367</td> 
<td>1866367</td>
<td>1866367</td> 
<td>1453</td> 
<td>1453</td> 
<td>1453</td>  
<td>1453</td>
<td>1453</td>
<td>1453</td>
<td>1453</td> 
</tr> 
<tr> 
<td>596597</td> 
<td>596597</td>
<td>596597</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 

<td>0</td> 
<td>0</td> 
</tr>
<tr> 
<td>746162</td>
<td>746162</td> 
<td>746162</td> 
<td>0</td>  
<td>0</td>  
<td>0</td> 
<td>0</td>  
<td>0</td> 
<td>0</td> 
<td>0</td> 
</tr>
</tbody>
</table>
</div>


<div class="col-md col-sm divdata">
<input value="1" />
<table class="table_data convert_width tblaa"> 
<tbody>
<tr> 
<th>挑选信息</th>
<th>初配方版本</th>
<th>原烟投入（担）</th>
<th>产出挑烟（担）</th>  
<th>与初配方比例对比</th>
<th>中华线水分AVG</th> 
<th>中华线温度AVG</th>  
<th>中华线温度AVG</th>  
<th>中华线水分AVG</th>  
<th>选叶合格率AVG</th>
</tr>  
<tr>
<td class="aa">1</td>  
<td>2</td>  
<td>3</td>  
<td>4</td>  
<td>5</td> 
<td>6</td> 
<td>7</td>  
<td>8</td> 
<td>9</td> 
<td>10</td> 
</tr> 
<tr>
<td>1866367</td> 
<td>1866367</td>
<td>1866367</td> 
<td>1453</td> 
<td>1453</td> 
<td>1453</td>  
<td>1453</td>
<td>1453</td>
<td>1453</td>
<td>1453</td> 
</tr> 
<tr> 
<td>596597</td> 
<td>596597</td>
<td>596597</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 

<td>0</td> 
<td>0</td> 
</tr>
<tr>
<td>746162</td>
<td>746162</td> 
<td>746162</td> 
<td>0</td>  
<td>0</td>  
<td>0</td> 
<td>0</td>  
<td>0</td> 
<td>0</td> 
<td>0</td> 
</tr>
</tbody>
</table>
</div>


</body>


</html>

<script type="text/javascript">

// 多张表格的 单元格事件
         $(".tblaa td").click(function () {
         //列
        var tdSeq = $(this).parent().find("td").index($(this));
        //行
        var trSeq = $(this).parent().parent().find("tr").index($(this).parent());
        console.log(trSeq+"==="+tdSeq);
       var  tr= $(this).closest("tr");// 获取选中的行
       var feedindayBatchs=tr.find(".aa").html(); // 根据class 取值
       var va = $(this).parent().parent().find("tr:gt(0):eq(0) td:eq("+tdSeq+")").text();
        alert(" va=="+  va);
    }); 
</script>
322829
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap Table使用整理（三）
08-30
在“Bootstrap Table使用整理（三）”中，主要讨论了单元格内容格式化、列显示控制以及单选处理这三大知识点。 1. 单元格内容格式化 Bootstrap Table 提供了 `data-formatter` 属性，允许开发者自定义单元格内容的...
Bootstrap Table使用整理(一)
10-19
Bootstrap Table 是一个基于 Bootstrap 框架的 jQuery 插件，它为网页中的表格提供了丰富的功能，如单选、多选、排序、分页、编辑、导出和过滤。这个插件的设计目标是通过简洁的配置，让开发者能够快速实现复杂的...
Bootstrap Table使用整理(二)
08-30
在“Bootstrap Table使用整理(二)”中，我们将探讨如何进行行样式修改、单元格样式定义与对齐方式设置以及排序列的定义。 一、行样式修改 在Bootstrap Table中，我们可以利用`data-row-style`属性来自定义每一行的...
BootStrapTable 单选及取值的实现方法
08-31
BootstrapTable 是一个流行的前端数据展示库，它基于 Bootstrap 框架，提供了丰富的表格功能，如排序、筛选、分页等。在本教程中，我们将探讨如何实现 BootstrapTable 的单选功能以及如何获取选中行的值。 1. **...
开题报告达达宠物认领信息网站的设计与实现 已通过开题答辩的.docx
07-25
宠物认领信息网站的主要目的是为寻找宠物的失主和寻找新家的宠物提供一个在线的信息交流平台。通过这个平台，失主可以发布失宠信息，寻找走失或遗弃的宠物；而救助人或组织则可以发布待领养的宠物信息，为那些无家可归的宠物寻找一个永久的归宿。 这样的网站通常会提供一个详细的宠物数据库，包括照片、品种、年龄、健康状况等信息，以便让失主能够方便地找到自己的宠物。同时，网站还会提供一些相关的服务，如失主与救助人之间的在线交流、宠物匹配推荐、领养手续办理等，以帮助双方顺利完成宠物的认领和领养过程。 宠物认领信息网站的目的在于提高失宠找到宠物的几率，减少流浪宠物的数量，并为那些无家可归的宠物提供一个温馨的新家。同时，网站还能促进社会对流浪宠物的关注和保护，提高人们的动物保护意识。
开题报告创权法律服务系统 已通过开题答辩的.doc
07-25
进入20世纪80年代，我国加快了改革开放的步伐，市场经济体制已逐步形成，我国的经济发展受世人所瞩目，但法律法规的置后，使经济发展不规范问题暴露的相当严重，特别是社会整体信用的缺失，使消费环境不断恶化。而如今随着城镇化的高速推进，精神追求远不及物质发展迅速，维权问题也越来越成为人们十分关注的社会话题。 维权是指维护个人或群体的合法权益，范围包括人身损害、土地纠纷、 医疗事故、婚姻、家庭、继承等民事纠纷所进行的行政及司法诉讼。维护消费者合法权益关系着全社会每个人的利益，群众利益无小事。维护消费者合法权益正体现着“权为民所用，利为民所谋”。而现如今由于法律规则的不完善加上自身对法律知识的不了解，导致很多公民的权益问题在复杂的社会情况下无法得到妥善的解决，使得公民的财产和心理受到难以弥补的损失，严重威胁到社会的安全与稳定，公民之间的诚信与统一。因此更便捷、迅速地维护公民的合法权益，已经成为了一个刻不容缓去解决的社会问题。
Matlab实现豪猪优化算法CPO-TCN-Multihead-Attention多输入单输出回归预测算法研究.rar
07-25
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
人力资源-6 团结一致共创未来新员工座谈会.pptx
07-25
人力资源-6 团结一致共创未来新员工座谈会.pptx
《AI大模型应用》--基于PepperBot，可以保留上下文的LLM群聊机器人实现.zip
07-25
上接OpenAI、文心一言，下接QQ、微信、Telegram 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！
开题报告传统糕点 已通过开题答辩的.docx
07-25
理论意义： 1、网页设计是信息传播的重要手段，通过合理的布局、图文搭配等设计元素，可以更好地传递传统糕点的信息。理论上，这涉及到传播学、信息传递模型等方面的理论研究，确保信息能够被受众准确、清晰地接收。 2、用户体验理论强调用户与网页之间的交互和感知。在传统糕点推广网页设计中，理论上的考虑应该包括用户友好的界面、易于导航的网站结构，以及引导用户深入了解传统糕点的设计元素。
GBT 2423.1-2008-试验A-低温
最新发布
07-25
GBT 2423.1-2008-试验A-低温
2500多个AI工具合集包括视频自动剪辑、AI视频生成、AI教程、视频换脸、图片生成等待
07-25
概述： 在这个数字化时代，人工智能（AI）工具正迅速成为创意和生产力的强大推动力。我们的AI工具合集汇集了超过2500个工具，覆盖视频自动剪辑、AI视频生成、AI教程、视频换脸、图片生成等多个领域，为创意专业人士和爱好者提供了一个全面的解决方案。 特点： 视频自动剪辑： 利用先进的AI算法，自动识别并剪辑视频内容，节省编辑时间，提高效率。 AI视频生成： 创造全新的视频内容，无需实际拍摄，AI可以根据脚本或概念生成逼真的视频。 AI教程： 提供各种AI工具的使用教程，帮助用户快速掌握工具的使用技巧。 视频换脸： 通过深度学习技术，实现视频中人物面部的替换，为视频制作增添更多可能性。 图片生成： 根据用户输入的描述自动生成图片，为设计和创意工作提供灵感。 应用领域： 电影和电视制作 广告和营销 社交媒体内容创作 游戏开发 教育和培训 优势： 高效率： AI工具可以大幅度提高工作流程的速度。 易用性： 即使是初学者也能快速上手使用这些工具。 创新性： AI的创造力可以帮助用户实现前所未有的创意效果。 成本效益： 相比传统方法，AI工具可以降低生产成本。
毕业设计javajsp高校科研项目管理系统sqlserver-qr源码含文档工具包
07-25
毕业设计javajsp高校科研项目管理系统sqlserver-qr源码含文档工具包 页面是jsp，数据库sqlserver，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 教师科研与论文信息交流平台 课题申报 感研申报 修改个人信息 查询成果申报 查询课题申报 未入库课题/成果 已入库课题成果 研审批 信息统计 查看用户信息 添加用户信息 按作者查询 信息查询 按日期查询 按关键字查询 按类型查动 包含：源码、数据库脚本、论文、答辩ppt、开题报告、环境工具包、相同框架项目的安装教程（在说明文档中）
b135大学生平时成绩量化管理系统-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
07-25
大学生平时成绩量化管理系统在对开发工具的选择上也很慎重，为了便于开发实现，选择的开发工具为Eclipse，选择的数据库工具为Mysql。以此搭建开发环境实现大学生平时成绩量化管理系统的功能。其中管理员管理用户，新闻公告。 大学生平时成绩量化管理系统是一款运用软件开发技术设计实现的应用系统，在信息处理上可以达到快速的目的，不管是针对数据添加，数据维护和统计，以及数据查询等处理要求，大学生平时成绩量化管理系统都可以轻松应对。 学生管理页面，此页面提供给管理员的功能有：学生的查询管理，可以删除学生、修改学生、新增学生，还进行了对用户名称的模糊查询的条件。成绩信息管理页面，此页面提供给管理员的功能有：查看已发布的成绩信息数据，修改成绩信息，成绩信息作废，即可删除，还进行了对成绩信息名称的模糊查询 成绩信息信息的类型查询等等一些条件。公告类型管理页面，此页面提供给管理员的功能有：根据公告类型进行条件查询，还可以对公告类型进行新增、修改、查询操作等等。公告信息管理页面，此页面提供给管理员的功能有：根据公告信息进行新增、修改、查询操作等等。
stream_110_4_01e4ed390f2c384b010376038a3ea73e15_4
07-25
stream_110_4_01e4ed390f2c384b010376038a3ea73e15_4
校企联合课程大作业(研究生课程)
07-25
校企联合课程大作业(研究生课程)
《AI大模型应用》--文心一言助手（油猴脚本）.zip
07-25
个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！
Carsim帮助文档Carsim2021入门教程NI-RT-Guide.pdf
07-25
NI-RT_Guide介绍了如何将VehicleSim（VS）产品（BikeSim、CarSim或TruckSim）与National Instruments（NI）实时（RT）目标系统配合使用。
coca 60000 2020版含全部词义
07-25
网络上很多60000 的单词没有全部的解释，这里表格包含 coca 60000的全部解释
bootstrap table使用整理
06-28
### 回答1： Bootstrap table是一个基于Bootstrap框架开发的表格插件，可以用于展示和编辑数据。 使用Bootstrap table，首先需要在HTML文件中引入必要的文件，包括Bootstrap CSS和JS文件、jQuery库和Bootstrap table插件文件。然后在HTML代码中添加一个表格的容器，指定其ID和样式。 接着可以使用JavaScript代码初始化表格，指定表格的列数、列名称、数据来源等。还可以设置表格的样式、分页、排序、搜索等功能。 具体来说，可以参考Bootstrap table的官方文档和示例，学习如何使用该插件。在实际使用中，需要根据自己的需求进行适当的配置和定制。 ### 回答2： Bootstrap Table 是一个基于Bootstrap框架的轻量级、高度可扩展、响应式的表格插件，能够快速为 Web 应用程序提供带有各种功能的表格展示效果。它支持排序、分页、筛选、搜索、编辑、动态数据加载、行样式设定、多列排序、合并列、自定义表头、自定义列等等，使用非常方便，功能也很齐全。 使用Bootstrap Table，我们需要先引入相关的 js、css 文件，然后按照插件的要求，在HTML中添加相应的标签和属性即可。下面介绍一些Bootstrap Table的使用方法： 1.表格的基本结构 在 HTML 中添加一个表格元素 `<table>`，并在其中添加表格头 `<thead>`、表格主体 `<tbody>`和表格尾 `<tfoot>`。在 tbody 中使用tr、td等标签创建表格数据行和列。 2.引入插件 在HTML文档中引入Bootstrap Table相关的css和js文件，可以通过链接CDN或下载到本地使用。例如： ```html <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.css"> <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.js"></script> ``` 3.初始化表格 在HTML中使用表格标签后，需要对表格进行初始化，即调用 Bootstrap Table 插件初始化方法，一般使用以下代码： ```js $(function () { $('#table').bootstrapTable({ //Table 的参数设置 }); }); ``` 其中，#table 是表格的 ID，可以根据需要变更。参数设置可以根据自己的需要设置，例如： ```js //Table 参数设置 data: data, //需要展示的数据，可以使用数组或对象格式 height: 500, //Table 的高度 striped: true, //是否显示表格的行间隔色 pagination: true, //是否启用分页插件 pageNumber: 1, //默认显示第一页 pageSize: 10, //分页大小 search: true, //是否启用搜索框 showColumns: true, //是否显示内容列下拉框 showRefresh: true, //是否显示刷新按钮 columns: [ //列设置 { field: 'id', title: 'ID' }, { field: 'name', title: '名称' } ], //行事件 onDblClickRow: function (row, $element) { //双击行事件 } ``` 4.表格的功能扩展 Bootstrap Table还提供了各种功能扩展，例如： ① 分页功能：开启分页插件，自动生成分页按钮。 ② 搜索功能：开启搜索插件，输入关键词进行快速搜索。 ③ 排序功能：开启排序插件，通过点击表格标题可以实现对表格数据的排序。 ④ 编辑功能：开启编辑插件，可以对表格数据进行编辑。 ⑤ 展开/折叠功能：开启展开插件，将一个单元格中的数据展开成一个子表格。 总之，Bootstrap Table 是一个完善的表格插件，大大提高了表格数据展示和交互的效果和体验，使用过程中只需根据需求进行调整和扩展即可。 ### 回答3： Bootstrap是目前前端开发中最流行的框架之一，而Bootstrap table就是它所提供的一种用于处理大量数据的表格组件。通过Bootstrap table，开发人员可以轻松地处理各种数据，使其简化统一，方便易懂。在本文中，我们将深入探讨Bootstrap table的使用整理。 1. 引入Bootstrap table 要使用Bootstrap table，我们首先需要在HTML文件中引入Bootstrap table的相关文件，如下： ```html <link rel="stylesheet" href="bootstrap-table.min.css"> <script src="jquery-3.5.1.min.js"></script> <script src="bootstrap-table.min.js"></script> ``` 2. 基本的Bootstrap table 使用Bootstrap table最基本的方式就是在HTML页面中添加一个table元素，如下： ```html <table id="mytable"></table> ``` 然后在我们的JS代码中可以这样来初始化Bootstrap table： ```javascript $(function(){ $('#mytable').bootstrapTable(); }); ``` 这就是Bootstrap table最基本的运用方式，但是，我们会发现一个问题：表格里并没有内容。接下来我们就需要告诉Bootstrap table到哪里去获取数据。 3. Bootstrap table中的数据 Bootstrap table支持多种格式的数据，包括数组、JSON、XML等。假设我们有一个数组： ```javascript var data = [ {name: "张三", age: 18, sex: "男", address: "北京市"}, {name: "李四", age: 20, sex: "女", address: "上海市"}, {name: "王五", age: 22, sex: "男", address: "广州市"}, {name: "赵六", age: 24, sex: "女", address: "深圳市"}, ]; ``` 那么我们就可以这样来把数据传入到Bootstrap table中： ```javascript $(function(){ $('#mytable').bootstrapTable({ data: data }); }); ``` 这样，我们的表格就会在加载时自动将数据填充进去。 4. Bootstrap table的列 有时候，我们并不希望全部的数据都显示在表格中，只需要选择其中的几列，可以使用Bootstrap table提供的columns属性来指定要展示的列。比如： ```javascript $(function(){ $('#mytable').bootstrapTable({ data: data, columns: [ {field: 'name', title: '姓名'}, {field: 'age', title: '年龄'}, {field: 'sex', title: '性别'}, {field: 'address', title: '地址'} ] }); }); ``` 这样我们就可以提取数据中的部分列来显示在表格里面了。 5. Bootstrap table的分页和排序 Bootstrap table还支持表格分页和排序的功能，这可以通过设置pagination和sortName属性来实现。比如： ```javascript $(function(){ $('#mytable').bootstrapTable({ data: data, columns: [ {field: 'name', title: '姓名'}, {field: 'age', title: '年龄'}, {field: 'sex', title: '性别'}, {field: 'address', title: '地址'} ], pagination: true, //开启分页功能 pageSize: 2, //默认每页显示的记录数 pageList: [2, 4], //分页大小列表 sortName: 'age', //默认排序的列 sortOrder: 'desc' //默认排序顺序 }); }); ``` 这样，我们就可以根据行数分页，根据列排序来方便地处理表格数据。 总结 Bootstrap table是一款非常方便易用的数据表格组件，通过上述的介绍，我们可以实现表格的基本展示、数据的传入、列的显示、分页排序等。如果你需要处理大量的数据，那么Bootstrap table绝对是你首选的组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值