如何爲表格中的每一列設置背景顏色？

Question

我有一個四列和兩行的表，第四列有一個按鈕的每一行，現在我想改變第二行第二列的背景顏色，同時單擊每行的按鈕。請讓我知道該怎麼辦？

這裏我已經放置了我的代碼供您參考。

$(function(){ 
    $('input').click(function(){ 
     $('table').find('tr td:eq(1)').css('background-color', 'red'); 
    }); 
}); 

HTML

<table border="1" style="border-collapse:collapse;"> 
    <tr> 
     <td>1</td> 
     <td>jai</td> 
     <td>description</td> 
     <td><input type="button" value="button"></input></td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>sul</td> 
     <td>description</td> 
     <td><input type="button" value="button"></input></td> 
    </tr> 
</table> 

Answer 1

查找包含使用closest()的按鈕tr，然後找到使用第二列

$(function() { 
 
    $('input').click(function() { 
 
    $(this).closest('tr').find('td:eq(1)').css('background-color', 'red'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table border="1" style="border-collapse:collapse;"> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>jai</td> 
 
    <td>description</td> 
 
    <td> 
 
     <input type="button" value="button"></input> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>2</td> 
 
    <td>sul</td> 
 
    <td>description</td> 
 
    <td> 
 
     <input type="button" value="button"></input> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

你並不需要使用重的JavaScript/jQuery的這種情況。相反，你可以使用<col>：

<table border="1" style="border-collapse:collapse;"> 
 
    <col style="background-color: #f00;" /> 
 
    <col style="background-color: #0f0;" /> 
 
    <col style="background-color: #00f;" /> 
 
    <col style="" /> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>jai</td> 
 
    <td>description</td> 
 
    <td><input type="button" value="button" /></td> 
 
    </tr> 
 
    <tr> 
 
    <td>2</td> 
 
    <td>sul</td> 
 
    <td>description</td> 
 
    <td><input type="button" value="button" /></td> 
 
    </tr> 
 
</table>

另外請注意，您不必</input>這可能會失敗一些代碼（如語法熒光筆）。

Answer 3

試試這個，

如果你知道在jQuery的父（）的再你也可以試試這個，

$(function() { 
    $('input').click(function() { 
    $(this).parent().parent().find('td:eq(1)').css('background-color', 'red'); 
    }); 
}); 

「$（this）.parent（）。parent（）。find（'td：eq（1）'）」在這行js中，它會移動到它的父標記兩次，意味着$（this）被點擊輸入控件，並從它移動到它的父標籤兩次以達到其標籤，並從該位置它將在位置1找到td。從這裏開始，您可以執行您的顏色更改操作，如上面的js代碼所示。