从 <th> 匹配文本的 <td> 获取值答案

【问题标题】：Get value from <td> where <th> matches text从 <th> 匹配文本的 <td> 获取值
【发布时间】：2018-06-04 20:23:23
【问题描述】：

使用我使用的系统，您可以创建自定义字段。这些字段都具有相同的 html 和 css。现在我想得到第 th 周的值 td。

现在我使用：

   var week = $(this).find('td.bug-custom-field:last').text();

这可行，但我必须确保它始终是最后一个字段。有更好的方法吗？

   <table>
   <tr>
   <th class="bug-custom-field category">Name</th>
   <td class="bug-custom-field" colspan="5">Test</td>
   </tr>

   <tr>
   <th class="bug-custom-field category">Week</th>
   <td class="bug-custom-field" colspan="5">23</td>
   </tr>
   </table>

【问题讨论】：

那不是一个有效的 HTML 表格
:contains(), .index() 和 .eq() 存在……
如果你把你的问题分成不同的部分，答案就会变得更容易看到：(a) 你需要知道哪个标题（从左边数起）包含你的文本。 (b) 你想找到某个位置的单元格（从左边数起）。这两个都很容易在网上找到。唯一剩下的就是将 (a) 的结果输入 (b)。
这是一个垂直的表格，所以它是有效的？我尝试 $("th.bug-custom-field.category:contains('Week')" ) 来获得正确的 th 但是我如何从中获得 td 值。你有例子吗？
@AnkitAgarwal 除了缺少可选的tbody，请告知为什么这不是一个有效的 HTML 表格。你真的认为th 只能出现在thead 中吗？或者您只能在第一个tr 中使用th？

标签： javascript jquery html

【解决方案1】：

变量 1：

var week=0;
$('table tr td').each(function(){
	if($(this).prev().text()=='Week'){
		week=parseInt($(this).text(), 10);
	}
});
console.log(week);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<table>
   <tr>
     <th class="bug-custom-field category">Name</th>
     <td class="bug-custom-field" colspan="5">Test</td>
   </tr>

   <tr>
     <th class="bug-custom-field category">Week</th>
     <td class="bug-custom-field" colspan="5">23</td>
   </tr>
</table>

变量 2：

var week = $('table').find('td.bug-custom-field:last').text();
console.log(week);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
   <tr>
    <th class="bug-custom-field category">Name</th>
    <td class="bug-custom-field" colspan="5">Test</td>
   </tr>

   <tr>
    <th class="bug-custom-field category">Week</th>
    <td class="bug-custom-field" colspan="5">23</td>
   </tr>
</table>

【讨论】：

【解决方案2】：

您已经掌握了所需的大部分详细信息。一旦你有了th，最强大的解决方案就是上到行，然后使用find 找到td。另一种方法是简单的.next()，但如果布局更改，则更有可能中断。

var th = $("th.bug-custom-field.category:contains('Week')")
var row = $(th).closest("tr");
var week = $(row).find('td.bug-custom-field:last').text();

var weekTH = $("th.bug-custom-field.category:contains('Week')")
var weekTR = $(weekTH).closest("tr");
var weekTD = $(weekTR).find('td.bug-custom-field:last');
var week = $(weekTD).text();
console.log(week);

th { text-align:left; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th class="bug-custom-field category">Name</th>
    <td class="bug-custom-field" colspan="5">Test</td>
  </tr>

  <tr>
    <th class="bug-custom-field category">Week</th>
    <td class="bug-custom-field" colspan="5">23</td>
  </tr>
</table>

【讨论】：