如何用Jquery获取Table指定行中指定列的数值

Posted 2023-05-02

例如说第三行第五列
我的想法是$("tr:eq(3)").next("td:eq(5)")
但是并不成功
单独获取其中一部分都没有问题
两个eq一块用就不能识别了

jQuery 遍历的 eq() 方法将匹配元素集缩减值指定 index 上的一个，index表示元素的位置（最小为 0）。所以获取Table第 i 行第 j 列的内容可用如下代码

$("table").find("tr").eq(i-1).find("td").eq(j-1).text(); // 注意-1是因为index从0开始计数

实例演示

创建html元素

<div class="box">
<span>填写行列数，点击按钮后获取对应位置的数值：</span><br>
<div class="content">
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
</div>
第<input type="text" name="row">行，第<input type="text" name="col">列<input type="button" class="btn" value="确定">
</div>

添加css样式

div.boxwidth:300px;height:250px;padding:10px 20px;border:4px dashed #ccc;
div.box>spancolor:#999;font-style:italic;
div.contentwidth:250px;height:100px;margin:10px 0;padding:5px 20px;border:2px solid #ff6666;
input[type='text']width:35px;height:30px;border:1px solid #99ccff;
input[type='button']width:100px;height:30px;margin:10px;border:2px solid #ebbcbe;
.selectedbackground:#99ccff;
tableborder-collapse:collapse;
tdpadding:5px 10px;border:1px solid green;

编写jquery代码

$(function()
$("input:button").click(function() 
row = $("input[name='row']").val() - 1;
col = $("input[name='col']").val() - 1;
val = $("table").find("tr").eq(row).find("td").eq(col).text();
alert(val);
);
)

观察显示效果

参考技术A next 是取同辈元素，不是去子元素的
alert($("tr:nth-child(3) td:nth-child(5)").html());

alert($("tr:eq(2) td:eq(4)").html());

alert($("tr:eq(2)").children().eq(4).html());
以上三个都能取到第三行第五列本回答被提问者和网友采纳 参考技术B 不是eq的问题，最简单的办法：
$("tr:eq(2) td:eq(4)").html();

使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。

一、简介

使用js方法对html中的table表格进行单元格的行列合并操作。

网上执行此操作的实例方法有很多，但根据实际业务的区别，大多不适用。

所以在网上各位大神写的方法的基础上进行了部分修改以适合自己业务中的使用。

二、js方法

 1 function MergeTableCell(tableId, startRow, endRow, col) {
 2     var tb = document.getElementById(tableId);
 3     //设置为0时,检索所有行
 4     if (endRow == 0) {
 5         endRow = tb.rows.length - 1;
 6     }
 7     //指定数据行索引大于表格行数
 8     if (endRow >= tb.rows.length) {
 9         return;
10     }
11     //检测指定的列索引是否超出表格列数
12     if (col >= tb.rows[0].cells.length) {
13         return;
14     }
15     //循环需要判断的数据行
16     for (var i = startRow; i < endRow; i++) {
17         //如果当前行与下一行数据值相同，则进行前面列的判断
18         if (tb.rows[startRow].cells[col].innerHTML == tb.rows[i + 1].cells[col].innerHTML) {
19             var Same = true;
20             //循环跟前面的所有的同级数据行进行判断
21             for (var j = col; j > 0; j--) {
22                 if (tb.rows[startRow].cells[j - 1].innerHTML != tb.rows[i + 1].cells[j - 1].innerHTML) {
23                     Same = false;
24                     break;
25                 }
26             }
27             //如果前面的同级数据行的值均相同，则进行单元格的合并
28             if (true == Same) {
29                 //如果相同则删除下一行的第0列单元格  
30                 tb.rows[i + 1].cells[col].style.display = ‘none‘;
31                 //更新rowSpan属性  
32                 tb.rows[startRow].cells[col].rowSpan = (tb.rows[startRow].cells[col].rowSpan | 0) + 1;
33             }
34             else {
35                 //增加起始行  
36                 startRow = i + 1;
37             }
38         }
39         else {
40             //增加起始行  
41             startRow = i + 1;
42         }
43     }
44 }

View Code

三、简单的释义

1、Function:合并表格相同行的内容
2、Parameter:
tableId：表格id,
startRow：起始行(索引0开始)如果有标题行则填写1
endRow：终止行(索引值)如果填写0则自动赋值
col：需要处理的列(索引值)
3、Example
MergeTableCell("table_test", 2, 0, 1);
Para1:table_test,table表格的id
Para2:2,开始行的索引值
Para3:0,结束行的索引值
Para4:1,需要处理的列的索引值
4、Worning
(1)合并一列，正常调用
示例:MergeTableCell("table_test", 2, 0, 0);
(2)合并多列，需要将待处理的列从大到小排列
示例:合并第一列和第二列
MergeTableCell("table_test", 2, 0, 1);
MergeTableCell("table_test", 2, 0, 0);
原因:
合并第二列时，需要判断第一列的值是否相同，
如果第一列的值不相同，则不进行合并。
table   col1    col2
row1    安徽    省
row2    浙江    省
如上，虽然第二列的值都为"省"，
但是第一列的值不相同，所以不进行单元格的合并。
原理:
合并时会当前列的两行数据与前面列的同级两行是否一致，
如果一致才会进行合并。
如果先进行合并第一列的值，
后面合并时判断前面的列值是否一致时，所获取到的前面列的值就是空，
也就无法正常的判断的值是否一致了。