colspanを使用してヘッダーテキストに基づいて列の背景色を変更します

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

このようなことがあります。このソリューションでは、選択した列の前に列スパンがあるかどうかを確認することもできます。

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>