jqueryでtr背景色を設定できません

Question

jqueryを使用してテーブル行の背景色を変更できません。
フォントの色で動作しますが、何らかの理由で背景色では動作しません。 $(this).parent('tr').css('color', 'red');

をしかし、これはそうではない：

この作品 $(this).parent('tr').css('background-color', 'green');

私が間違っているの何任意のアイデア？ インターネットで同様のケースを見つけることができませんでした。

$(document).on('click', "td", function(event) { 
 
    $(this).parent('tr').css('color', 'red'); 
 
    $(this).parent('tr').css('background-color', 'green'); 
 
});

table { 
 
    font-family: arial, sans-serif; 
 
    border-collapse: collapse; 
 
    width: 500px; 
 
    margin: 50px 0 0 50px; 
 
} 
 

 
td, 
 
th { 
 
    border: 1px solid #cacaca; 
 
    text-align: left; 
 
    padding: 8px; 
 
    background-color: #f5f5f5; 
 
} 
 

 
th { 
 
    background-color: #dce0e3; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>Company</th> 
 
    <th>Contact</th> 
 
    <th>Country</th> 
 
    </tr> 
 
    <tbody> 
 
    <tr> 
 
     <td>Alfreds Futterkiste</td> 
 
     <td>Maria Anders</td> 
 
     <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Centro comercial</td> 
 
     <td>Francisco Chang</td> 
 
     <td>Mexico</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Ernst Handel</td> 
 
     <td>Roland Mendel</td> 
 
     <td>Austria</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Island Trading</td> 
 
     <td>Helen Bennett</td> 
 
     <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Laughing Bacchus </td> 
 
     <td>Yoshi Tannamuri</td> 
 
     <td>Canada</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Magazzini Alimentari </td> 
 
     <td>Giovanni Rovelli</td> 
 
     <td>Italy</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

あなたは、なぜそれが起こっていないですTDの背景色#f5f5f5を与えてきたように。 jqueryでは、それをtrに適用します。

$(document).on('click', "td", function(event) { 
 
    $(this).parent('tr').css('color', 'red'); 
 
    $(this).parent('tr').css('background-color', 'green'); 
 
    $(this).parent('tr').find('td').css('background-color', 'green'); 
 
});

table { 
 
    font-family: arial, sans-serif; 
 
    border-collapse: collapse; 
 
    width: 500px; 
 
    margin: 50px 0 0 50px; 
 
} 
 

 
td, 
 
th { 
 
    border: 1px solid #cacaca; 
 
    text-align: left; 
 
    padding: 8px; 
 
    background-color: #f5f5f5; 
 
} 
 

 
th { 
 
    background-color: #dce0e3; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>Company</th> 
 
    <th>Contact</th> 
 
    <th>Country</th> 
 
    </tr> 
 
    <tbody> 
 
    <tr> 
 
     <td>Alfreds Futterkiste</td> 
 
     <td>Maria Anders</td> 
 
     <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Centro comercial</td> 
 
     <td>Francisco Chang</td> 
 
     <td>Mexico</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Ernst Handel</td> 
 
     <td>Roland Mendel</td> 
 
     <td>Austria</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Island Trading</td> 
 
     <td>Helen Bennett</td> 
 
     <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Laughing Bacchus </td> 
 
     <td>Yoshi Tannamuri</td> 
 
     <td>Canada</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Magazzini Alimentari </td> 
 
     <td>Giovanni Rovelli</td> 
 
     <td>Italy</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

あなたのコードが正しいですが、あなたはtrの上に塗るtd {background-color: #f5f5f5;}スタイルを持っているので、あなたはtrに割り当てられた背景のコードを参照することはできません。