javascript 只获取thead下的所有标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15873984/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get all th tags under thead only
提问by DA_Prog
I have a simple html table, which containg thead, tbody and tfoot. I want to select using javascript or jquery all th tags only within the thead. So far, I found a way to get either all th in table or the thead itself.
我有一个简单的 html 表，其中包含 thead、tbody 和 tfoot。我想只在 thead 中使用 javascript 或 jquery 选择所有标签。到目前为止，我找到了一种方法来获取表中的所有 th 或 thead 本身。
My table:
我的表：
<table id="MyTbl" class="display">
<thead>
<tr>
<th>
ID
</th>
<th>
Name
</th>
<th>
Desc
</th>
</tr>
</thead>
<tbody id="MyTableBody">
</tbody>
<tfoot>
<tr height="27px">
<th class="TDHMain">
FILTER ID
</th>
<th class="TDHMain">
FILTER NAME
</th>
<th class="TDHMain">
FILTER DESC
</th>
</tr>
</tfoot>
</table>
My javascript:
我的javascript：
var table = document.getElementById('MyTbl');
var tableHeader = table.getElementsByTagName('thead');
var headers = tableHeader.getElementsByTagName('th'); //This one doesn't work. No such a method for the thead tag
I also tried the following code:
我还尝试了以下代码：
headers = $('#MyTbl').find('thead > th').get();
But as a result I couldn't really understand how to work with it... It's not an array, there's no foreach function to the headers object I get as a result, and I really couldn't find a way to reach the data.
但结果我真的不明白如何使用它......它不是一个数组，我得到的 headers 对象没有 foreach 函数，我真的找不到访问数据的方法.
Is there anyway to get just the th elements within the thead of a table?
有没有办法只获取表格标题中的第 th 个元素？
Thanks
谢谢
回答by Eli
回答by DA_Prog
You can do it like this;
你可以这样做；
$('#MyTbl thead').find('th');
OR
或者
$('#MyTbl thead th').each(function() {
// Your code per th here
});
回答by PirateApp
No Jquery 2018
没有 Jquery 2018
let headers = document.querySelectorAll("#myTbl > thead > tr > th")
回答by Elish Gyamaru
With jQuery normal CSS selector such as $('#MyTbl thead th')works. But you can also use scoped selector. To use scoped selector, you mention the scope as second argument as
使用 jQuery 普通 CSS 选择器，例如$('#MyTbl thead th')作品。但是您也可以使用作用域选择器。要使用作用域选择器，您将作用域作为第二个参数提及
$('th','thead').css('color','red');
$('th','thead').css('color','red');
Here second argument theadprovides the scope.
See this fiddle for example
这里的第二个参数thead提供了范围。例如，请参阅此小提琴
回答by Dipesh Parmar
Try
尝试
var tableHead = $('#MyTbl thead tr th');
回答by DA_Prog
Oh ! I missed the "tr".
哦 ！我错过了“tr”。
I solved it the following way:
我通过以下方式解决了它：
headers = $('#MyTbl').find('thead > tr > th').get();
回答by Willie Cheng
More easy way to handle this question
更简单的方法来处理这个问题
<table id="table1">
<thead>
<tr>
<th style='width: 80px'>Mon</th>
<th style='width: 80px'>Tue</th>
<th style='width: 80px'>Wed</th>
<th style='width: 80px'>Thr</th>
<th style='width: 80px'>Fri</th>
<th style='width: 80px'>Sat</th>
<th style='width: 80px'>Sun</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
<script>
$(document).ready(function () {
test( $('#table1'));
});
function test(table) {
$.each($(table).find("th"), function (key, val2) {
alert(val2.innerHTML);
alert($(val2).html());
});
}
</script>
