javascript JQuery：如果表头 <th> 有一个类，则将类添加到表单元格 <td>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19958908/
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
JQuery: If a table header <th> has a class, add class to table cell <td>
提问by Keven
Let's say I have the following html:
假设我有以下 html：
<table>
<thead>
<tr>
<th class="alignRight">Header1</th>
<th>Header2</th>
<th class="alignLeft">Header3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row1</td> //Add class="alignRight"
<td>Row1</td>
<td>Row1</td> //Add class="alignLeft"
</tr>
<tr>
<td>Row2</td> //Add class="alignRight"
<td>Row2</td>
<td>Row2</td> //Add class="alignLeft"
</tr>
<tr>
<td>Row3</td> //Add class="alignRight"
<td>Row3</td>
<td>Row3</td> //Add class="alignLeft"
</tr>
</tbody>
</table>
If a TR in the THEAD contains the class "alignRight" or "alignLeft" I would like to apply the same class to the corresponding TD in the TBODY.
如果 THEAD 中的 TR 包含类“alignRight”或“alignLeft”，我想将相同的类应用于 TBODY 中的相应 TD。
I'm using JQuery and have tried the following, but none of them seem to work properly:
我正在使用 JQuery 并尝试了以下方法，但它们似乎都无法正常工作：
$('tr').has('th.alignRight').addClass('th.alignRight');
$('tr').has('th.alignLeft').addClass('th.alignLeft');
$('thead.tr').has('th.alignRight').addClass('tbody.th.alignRight');
$('thead.tr').has('th.alignLeft').addClass('tbody.th.alignLeft');
if ($('thead.tr').has('th.alignRight')){
$('tbody.tr').addClass('th.alignRight');
}
if ($('thead.tr').has('th.alignRight')){
$('tbody.tr.td').addClass('alignRight');
}
Any ideas on what could be wrong?
关于可能出什么问题的任何想法？
UPDATE:
更新：
I would like to add that I already iterate through the table using a .each() loop. I only need to add the condition that if the current table header has that class, add that same class to the table cell. Adding in an extra iteration during the current iteration sounds like it would lead to performance issues. Is that true?
我想补充一点，我已经使用 .each() 循环遍历了表。我只需要添加条件，如果当前表头具有该类，则将相同的类添加到表单元格中。在当前迭代期间添加额外的迭代听起来会导致性能问题。真的吗？
LOOP:
环形：
function(res) {
var tbl_body = "";
$.each(res, function () {
var tbl_row = "";
$.each(this, function (k, v) {
//Irrelevant code
tbl_row += "<td>" + v + "</td>";
})
tbl_body += "<tr>" + tbl_row + "</tr>";
})
$("#print").html(tbl_body);
},
//Other irrelevant code
回答by OlivierH
I think you don't see how jquery selectors work.
$('thead.tr')means : find me all theadwhich has the trclass. Visibly not what you want to do.
我认为你没有看到 jquery 选择器是如何工作的。
$('thead.tr')意思是：找到我所有thead的tr课程。显然不是你想做的。
Here a code that should work :
这是一个应该工作的代码：
$('tbody tr td').each(function(index){
//index contains the current td index in the parent tr (1,2,3),(1,2,3)...
//if the corresponding th has a class
if($('thead tr th').eq(index).attr('class') != ''){
//put this class on the current td
$(this).addClass($('thead tr th').eq(index).attr('class'));
}
});
Checking if the td has a class is not necessary, since addClass does nothing if you give it an empty parameter.
没有必要检查 td 是否有类，因为如果给它一个空参数， addClass 什么也不做。
回答by Arun P Johny
回答by Naftali aka Neal
Your code doesn't do what you think it does:
您的代码没有做您认为的那样：
// find all tr's that have a th with class `alignRight` and add class `th.alignRight` to them
$('tr').has('th.alignRight').addClass('th.alignRight');
// find all tr's that have a th with class `alignLeft` and add class `th.alignLeft` to them
$('tr').has('th.alignLeft').addClass('th.alignLeft');
etc, etc.
等等等等
Your code does nothingwith the <td>'s
您的代码对's没有任何作用<td>
What couldbe done:
什么可以做：
var thead = $('thead');
var tbody = $('tbody');
var rightIndex = $('th.alignRight', thead).index();
var leftIndex = $('th.alignLeft', thead).index();
$('tr', tbody).each(function(){
$('td', this).eq(rightIndex).addClass('alignRight');
$('td', this).eq(leftIndex).addClass('alignLeft');
});
回答by charlietfl
None of your addClass strings are valid. Whan adding a class you only provide the className.... no dotin it
您的 addClass 字符串均无效。焕加入了类，你只提供一个className ....没有dot它
/* would add class to the TR*/
$('tr').has('th.alignLeft').addClass('alignLeft');
Now to add to the TD can simply use selector
现在添加到 TD 可以简单地使用选择器
$('tr th.alignLeft td').addClass('alignLeft');
回答by Miquel Las Heras
Here is a solution: (fiddle here)
这是一个解决方案：（在这里小提琴）
var headrow = $('thead tr').children();
$('tbody tr').each(function(){
var row = $(this).children();
for(var i=0; i<headrow.length; ++i){
if($(headrow[i]).hasClass("alignRight")){
$(row[i]).addClass("alignRight");
}
if($(headrow[i]).hasClass("alignLeft")){
$(row[i]).addClass("alignLeft");
}
}
});
