根據標題文本與colspan更改列的背景顏色

Question

我正試圖解決類似的問題，這裏回答了這裏：https://stackoverflow.com/a/9541558/1933036。

我想在我的表格中根據特定標題設置樣式。這已在上述鏈接中解決，但它只適用於單個標頭。任何具有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'); 
    }); 
} 

正如你可以從我的例子中看到的，我不能上色的兩列單元格標題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，它也會考慮到它們。

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>