3

Let's say I have the following 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.

I'm using JQuery and have tried the following, but none of them seem to work properly:

$('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?

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
4

5 回答 5

7

我认为您没有看到 jquery 选择器是如何工作的。 $('thead.tr')意思是：找到我所有thead的tr课程。显然不是你想做的。

这是一个应该工作的代码：

$('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'));
    }
});

不需要检查 td 是否有一个类，因为如果你给它一个空参数， addClass 什么都不做。

于 2013-11-13T16:23:43.987 回答
5

尝试

$('table thead th[class]').each(function () {
    $('table tbody td:nth-child(' + ($(this).index() + 1) + ')').addClass(this.className)
})

演示：小提琴

于 2013-11-13T16:21:51.463 回答
1

您的代码没有按照您的想法执行：

// 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');

等等等等

您的代码与's无关<td>

可以做什么：

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');
});
于 2013-11-13T16:22:05.530 回答
0

这是一个解决方案：（在这里小提琴）

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");
      }
  }
});
于 2013-11-13T16:28:40.347 回答
0

您的 addClass 字符串均无效。添加一个类时，您只提供类名....dot没有

/* would add class to the TR*/
$('tr').has('th.alignLeft').addClass('alignLeft');

现在添加到 TD 可以简单地使用选择器

$('tr th.alignLeft td').addClass('alignLeft');
于 2013-11-13T16:23:15.453 回答