如何根據jquery改變td元素的背景顏色

基於類類，我堅持挑戰改變背景顏色td元素。下面是HTML代碼，其中有日類稱爲機器人，我已經改變所有的TD的機器人類以下元素的背景顏色。如何根據jquery改變td元素的背景顏色

<table border="1" class="CSSTableGenerator" id="myTable"> 
    <tr> 
     <th>Component</th> 
     <th>Properties</th> 
     <th class="bots">J10</th> 
     <th>J11</th> 
     <th>J12</th> 
     <th>J13</th> 
    </tr> 
    <tr> 
     <td>GenerateAlternateTagUrlDroplet</td> 
     <td>alternateTagConfiguration</td> 
     <td class="trueValue">/com//jec/website/seo/</td> 
     <td class="trueValue">/com//jec/website/seo/</td> 
     <td class="trueValue">/com//jec/website/seo/</td> 
     <td class="trueValue">/com//jec/website/seo/</td> 
    </tr> 
    <tr> 

    <td>AlternateTagUrlDroplet</td> 
     <td>tagConfiguration</td> 
     <td class="trueValue">/jec/website/seo/</td> 
     <td class="trueValue">/jec/website/seo/</td> 
     <td class="trueValue">/jec/website/seo/</td> 
     <td class="trueValue">/jec/website/seo/</td> 
    </tr> 
    </table>

有人可以幫我用jQuery代碼來實現這個嗎？

很多預先感謝。

來源

2016-06-12 harshavmb

喜其它表，你將能夠提供你目前的CSS？ –

感謝Caelan對此進行調查。那麼，我沒有一個適當的CSS。我只是使用jquery $（'。trueValue'）。addClass（'foo'）;並在我的CSS文件中，我設置了這樣的背景顏色.foo {background-color：green;}。這僅適用於td元素。 – harshavmb

您可以使用map()返回.bots類的索引數組，然後使用相同的索引更改的css。

var bots = $('tr th.bots').map(function() { 
 
    return $(this).index(); 
 
}).get() 
 

 
$('tr:not(:first) td').each(function() { 
 
    if (bots.indexOf($(this).index()) != -1) $(this).css('background', 'blue') 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border="1" class="CSSTableGenerator" id="myTable"> 
 
    <tr> 
 
    <th>Component</th> 
 
    <th>Properties</th> 
 
    <th class="bots">J10</th> 
 
    <th>J11</th> 
 
    <th class="bots">J12</th> 
 
    <th>J13</th> 
 
    </tr> 
 
    <tr> 
 
    <td>GenerateAlternateTagUrlDroplet</td> 
 
    <td>alternateTagConfiguration</td> 
 
    <td class="trueValue">/com//jec/website/seo/</td> 
 
    <td class="trueValue">/com//jec/website/seo/</td> 
 
    <td class="trueValue">/com//jec/website/seo/</td> 
 
    <td class="trueValue">/com//jec/website/seo/</td> 
 
    </tr> 
 
    <tr> 
 

 
    <td>AlternateTagUrlDroplet</td> 
 
    <td>tagConfiguration</td> 
 
    <td class="trueValue">/jec/website/seo/</td> 
 
    <td class="trueValue">/jec/website/seo/</td> 
 
    <td class="trueValue">/jec/website/seo/</td> 
 
    <td class="trueValue">/jec/website/seo/</td> 
 
    </tr> 
 
</table>

來源

2016-06-12 16:34:10

謝謝Nenad。對這個不清楚的問題抱歉。我還有其他的bot類。您的代碼完美適用於第一列。如果我的代碼有多個類，該怎麼辦？我如何根據班級名稱更改顏色？例如，在這種情況下，殭屍班。再次非常感謝您的回答。 – harshavmb

@harshavmb我更新了我的答案。 –

真棒，這是工作，但它正在改變其他表沒有殭屍班的其他表的背景？任何機會我們可以阻止顏色變爲非機器人班？我很抱歉，在這裏問太多東西。感謝您的耐心。很多謝謝 – harshavmb

一種選擇將是沿着線做一些事情：

Codepen

var nthChild = $('.bots').index() + 1; // Add 1 since index starts at 0 
$("td:nth-child(" + nthChild + ")").css("background", 'yellow');

來源

2016-06-12 16:40:25

謝謝@ dwreck08你的答案。 – harshavmb

也許讓所有th.bots指數並用它來着色TDS。假設你有jQuery的：

$('th.bots').each(function(){ 
    $('td:nth-child('+($(this).index() + 1)+')').css('background-color', 'blue'); 
});

編輯：不包括同一頁面 http://codepen.io/anon/pen/PzNZrE

$('th.bots').each(function(){ 
    $(this).parents('table').children().find('td:nth-child('+($(this).index() + 1)+')').css('background-color', 'blue'); 
});

來源

2016-06-12 16:49:35 Teleeg

謝謝您的回答 – harshavmb

根據您的要求更新了答案 – Teleeg

如何根據jquery改變td元素的背景顏色

回答

相關問題