當在同一行上選擇單選按鈕時，更改表格單元格中的字體顏色

我有一個包含多行的HTML表格。在每一行中，第一列有一個問題（文本），第三，三個單選按鈕分別在第2,3,4列中回答是，否或N/A。當在同一行上選擇單選按鈕時，更改表格單元格中的字體顏色

我希望能夠改變文本的字體顏色在第一列進行檢查或者在同一行中單選按鈕的時候。

其他在這裏＃1問題是指改變，其中單選按鈕所在的單元格的背景顏色，但在這種情況下，我需要修改第一列的屬性在同一行來代替。

PS：你可以找到啞代碼與this JSBin fiddle玩：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <table border=1> 
    <tr> 
     <th>Question</th> 
     <th>Yes</th> 
     <th>No</th> 
     <th>N/A</th> 
    </tr> 
    <tr> 
     <td>Are you a student?</td> 
     <td><input type="radio" name="student"></td> 
     <td><input type="radio" name="student"></td> 
     <td><input type="radio" name="student"></td> 
    </tr> 
    </table> 
</body> 
</html>

任何提示或建議會更受歡迎。提前致謝！

來源

2017-02-15 gacanepa

你有jQuery的文檔中加載？ – Mojtaba

@Mojtaba - 是的，我喜歡。不過，我忘了將它添加到JSBin小提琴中。 – gacanepa

您可以設置事件偵聽器。

您還可以獲得所選擇的值來設置基礎上的價值，如果你想要的顏色。

$("input[name='student']").change(function(){ 
 
    console.log($(this).val()); 
 
    $(this).closest('tr').children('td').first().css('color', '#455434'); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<table border=1> 
 
    <tr> 
 
     <th>Question</th> 
 
     <th>Yes</th> 
 
     <th>No</th> 
 
     <th>N/A</th> 
 
    </tr> 
 
    <tr> 
 
     <td>Are you a student?</td> 
 
     <td><input value="1" type="radio" name="student"></td> 
 
     <td><input value="2" type="radio" name="student"></td> 
 
     <td><input value="3" type="radio" name="student"></td> 
 
    </tr> 
 
    </table>

來源

2017-02-15 15:46:08 Mojtaba

非常感謝！這就是我一直在尋找的！ – gacanepa

@ gacanepa，沒問題。請記住，您可以刪除'console.log'行。我只是添加它來告訴你如何獲得選定的值 – Mojtaba

$(document).ready(function() { 
    $('input[type=radio][name=student]').change(function() { 
     $("td:first-child").css("color", "red"); 
    }); 
});

這可能會改變第一個td單元格的字體顏色時，單選按鈕被選中的問題。

如果您想要，您可以添加條件語句以檢查選中哪個複選框並更改字體顏色，因此當選擇no時文本可以變爲紅色，選擇yes時爲綠色。

來源

2017-02-15 15:46:08

非常感謝你！我希望我可以選擇兩個答案。 – gacanepa

您可以根據選擇哪個無線上遍歷DOM尋找點擊該行的第一列，並改變顏色。

這裏是一個Fiddle Demo。

$('input:radio').on('click', function() { 
    //clear any existing background colors in the first column 
    $('table tr td:first-child').css('background','transparent'); 
    //find the index of the column that contains the clicked radio 
    var col = $(this).closest('td').index(); 
    //find the first td in that row 
    var firstTd = $(this).closest('tr').find('td:first-child'); 
    //set the color based on the column index of the clicked radio 
    var color; 
    switch (col) { 
    case 1: 
     color = 'red'; 
     break; 
    case 2: 
     color = 'green'; 
     break; 
    case 3: 
     color = 'purple'; 
     break; 
    } 
firstTd.css('background', color); 
});

來源

2017-02-15 15:50:12

謝謝！這確實是一個很好的答案！ – gacanepa

當在同一行上選擇單選按鈕時，更改表格單元格中的字體顏色

回答

相關問題