使用colspan根据标题文本更改列的背景颜色

I am trying to solve a similar problem that was answered here: https://*.com/a/9541558/1933036.

我正在尝试解决一个类似的问题:https://*.com/a/9541558/1933036。

I would like to style cells in my table based on a specific header. This was resolved in the above link, however it only works with single headers. Any header that has a colspan of 2 or more will cause this code not to work. I have demonstrated this in forked version of the working solution with a heading spanning multiple columns: https://jsfiddle.net/icarnaghan/apj2ady4/1/. The same code follows.

我希望基于特定的头来对表中的单元格进行样式化。这在上面的链接中得到了解决，但是它只适用于单个头。任何具有2个或以上的colspan的标题将导致该代码不工作。我已经在分叉版本的工作解决方案中演示了这一点，该解决方案的标题跨越了多个列:https://jsfiddle.net/icarnaghan/apj2ady4/1/。相同的代码。

<table border="1">
<thead>
 <tr>
     <th>Header 1</th>
     <th colspan="2">Header 2</th>
 </tr>
 </thead>
 <tbody>
 <tr>
     <td>row 1, cell 1</td>
     <td>row 1, cell 2</td>
     <td>row 1, cell 3</td>
 </tr>
 <tr>
     <td>row 2, cell 1</td>
     <td>row 2, cell 2</td>
     <td>row 2, cell 3</td>
 </tr>
 </tbody>
 </table>

var txt = 'Header 2';
var column = $('table tr th').filter(function() {
    return $(this).text() === txt;
}).index();

if(column > -1) {
    $('table tr').each(function() {
        $(this).find('td').eq(column).css('background-color', '#ccc');
    });
}

As you can see from my example, I am unable to colorize the cells for both columns under heading 2. I'm not sure this would even be the correct approach given my problem, however any advice or tips would be greatly appreciated.

正如您从我的示例中可以看到的，我无法在标题2下为两列着色。我不确定这是否会是正确的方法给我的问题，然而任何建议或建议都会非常感谢。

2 个解决方案

#1

Try this.

试试这个。

var txt = 'Header 2';
var column = $('table tr th').filter(function() {
    return $(this).text() === txt;
}).index();
//alert( $('table tr').find('th').eq(1).attr('colspan'));
var count=$('table tr').find('th').eq(column).attr('colspan');
//alert(count);
if(column > -1) {
    $('table tr').each(function() {
var trObj=$(this);
//alert(trObj);
        $(this).find('td').eq(column).css('background-color', '#ccc');

for(var lpvar=column;lpvar<=count;lpvar++)
{
//alert(trObj.find('td').eq(lpvar).text());
    trObj.find('td').eq(lpvar).css('background-color', '#ccc');
}
    });
}

#2

You could something like this. This solution would also ensure if you have any colspans prior to the chosen column, it would factor them as well.

你可以像这样。这个解决方案还将确保，如果在选择的列之前有任何colspan，它也会对它们进行因式分解。

function applyBackground(txt) {

  var column = $('table tr th:contains("' + txt + '")');
  if (column.length < 1) {
    return;
  }
  var getColspans = column.attr("colspan");
  var columnValue = column.index();


  var totalCells = 0;
  $.each(column.siblings(), function(value, ele) {
    //Only count the cells that are prior to the selected Column
    if (value < columnValue) {
      totalCells = totalCells + parseInt($(ele).attr("colspan"))
    }
  });


  $('table tbody tr').each(function() {
    for (let idx = 0; idx < parseInt(getColspans); idx++) {
      $(this).find('td').eq(totalCells + idx).css('background-color', '#ccc');
    }
  });

}

applyBackground('Header 2');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <thead>
    <tr>
      <th colspan="2">Header 1</th>
      <th colspan="2">Header 2</th>
      <th colspan="1">Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>

      <td>row 1, cell 1</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 3</td>
      <td>row 1, cell 4</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 2, cell 2</td>
      <td>row 2, cell 3</td>
      <td>row 2, cell 4</td>
    </tr>
  </tbody>
</table>

#1