从选定行获取第三个属性

Question

获取表格行元素的最佳方法是什么？ 我有这个网格，它是一个动态添加的网格。每个td都有class =＆＃39; dxgv＆＃39;

第一列是一个可选列，其中包含行的id，但我需要在客户端知道所选行中的第三个属性。 （Prejudicii，Penalitati ......）

我以为我可以这样做：

 var td = $(".dxgv").find("td:eq(3)").val();

我将获得该值，但它无效。

我已经尝试了答案，但我无法解决问题。 例如，如果我使用

 var ee = $('tr:has(input:checked) td:eq(3)').text();
 var td = $(".dxgv:eq(2)").text();
 console.log('Textbox value at row ' + i + ': ' + td);
 console.log('ee value at row ' + i + ': ' + ee);

我明白了：

Answer 1

你的JQuery逻辑有点偏，但几乎就在那里。

 var td = $(".dxgv").find("td:eq(3)").val();

您使用的上述代码段告诉浏览器在类<td>的元素中查找第三个.dxgv元素。但根据您提供的屏幕截图，问题很明显：

• <td>本身有类
• 该单元格是第三个单元格（索引为2，而不是3）

所以你想要的是使用这个选择器：

var td = $(".dxgv").eq(2).text();

变化：

• 使用.eq(2)过滤当前选择，以便获得第三个.dxgv元素。请记住，JS使用从零开始的索引（第三个元素的索引为2）
• 使用.text()访问元素的文字内容

参见概念验证示例：

＆＃13;

＆＃13;

$('button').on('click', function() {
  var td = $('.dxgv').eq(2).text();
  console.log(td);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
	<tbody>
		<tr>
			<td class="dxgv"><input type="checkbox" /></td>
			<td class="dxgv">24/04/2018</td>
			<td class="dxgv">Prejudicii</td>
		</tr>
	</tbody>
</table>

<button type="button">Click to get text from third cell</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

除非您有某种输入元素，否则.val()将无效。您可以改为使用.html()或.text()：

var td = $(".dxgv").eq(2).text(); // note .eq(2), because the function is zero-based.

Answer 3

你几乎是对的，但有一些小错误：

1）.find()获取作为选择子元素的元素。你的tds 是选择，没有孩子，所以这不会找到任何东西。相反，您需要直接从集合中选择第3个元素

2）.val()从表单字段（如文本框）中获取值。要从非表单元素（例如td）获取值，您需要使用.text()。

3）eq()使用零索引，因此要获得第3个元素，您实际需要请求元素2。

$(function() {
  var td = $(".dxgv:eq(2)").text();
  console.log(td);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="dxgv">1st</td>
    <td class="dxgv">2nd</td>
    <td class="dxgv">3rd</td>
    <td class="dxgv">4th</td>
    <td class="dxgv">5th</td>
  </tr>
</table>

Answer 4

这是因为jQuery的find()看起来里面你选择的元素。因此，您给出的代码在每个td内查找第四个（第一个元素的索引为0）.dxgv，这不存在。 另外，看到它不是input元素，您需要内部文本而不是其值。

你可能正在寻找这样的东西：

$('tr:has(input:checked) td:eq(2)').text();

选择其中包含已检查tr的每个input，然后从中选择第三个td。

请注意text()从匹配的每个元素中获取文本，并将它们组合成单个String，因此如果要支持多行的选择，则需要使用jQuery的{{3}函数将它们逐个添加到数组中。