Question

我正在尝试解决此处回答的类似问题：https://stackoverflow.com/a/9541558/1933036。

我想基于特定的标题来设置表格中的单元格。这已在上面的链接中解决，但它只适用于单个标头。任何colspan为2或更大的标头都会导致此代码无效。我已经在工作解决方案的分叉版本中演示了这一点，其标题跨越多列：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');
    });
}

从我的示例中可以看出，我无法为标题2下的两列的单元格着色。我不确定这对于我的问题是否是正确的方法，但是任何建议或提示都会非常感激

Answer 1

试试这个。

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

Answer 2

你可以这样。这个解决方案还可以确保如果您在所选列之前有任何colspans，它也会考虑它们。

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用colspan更改基于标题文本的列的背景颜色

2 个答案: