为此，我将参数this传递给将要完成工作的函数。我希望this成为点击的单选按钮。然后我找到该按钮的tr并用$changed_tr.css("bgcolor", "72ff76");更改其颜色，但这不起作用。
我在这里错过了什么？
function save(avail_id, map_id, radio) {
//some api call...
// change background color
var $changed_tr = $(radio).closest('td').closest('tr');
$changed_tr.css("bgcolor", "72ff76");
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="header-text">
<p>
<table border=1>
<tr>
<td>yyy
</td>
<td>
<label>
<input type="radio" name="target_105146" value="-11"
onclick="save(105146,-11,this);">
</label>Discontinued
<label>
<input type="radio" name="target_105146" value="-8"
onclick="save(105146,-8,this);">
</label>Future product
<label>
<input type="radio" name="target_105146" value="-6"
onclick="save(105146,-6,this);">
</label>In store only
<label>
<input type="radio" name="target_105146" value="-5"
onclick="save(105146,-5,this);">
</label>In Stock
<label>
<input type="radio" name="target_105146" value="-4"
checked
onclick="save(105146,-4,this);">
</label>Delayed delivery
<label>
<input type="radio" name="target_105146" value="-2"
onclick="save(105146,-2,this);">
</label>Out of stock
<label>
<input type="radio" name="target_105146" value="-1"
onclick="save(105146,-1,this);">
</label>Unknown
</td>
</tr>
<tr
>
<td>
xxx
</td>
<td>
<label>
<input type="radio" name="target_105521" value="-11"
onclick="save(105521,-11,this);">
</label>Discontinued
<label>
<input type="radio" name="target_105521" value="-8"
onclick="save(105521,-8,this);">
</label>Future product
<label>
<input type="radio" name="target_105521" value="-6"
checked
onclick="save(105521,-6,this);">
</label>In store only
<label>
<input type="radio" name="target_105521" value="-5"
onclick="save(105521,-5,this);">
</label>In Stock
<label>
<input type="radio" name="target_105521" value="-4"
onclick="save(105521,-4,this);">
</label>Delayed delivery
<label>
<input type="radio" name="target_105521" value="-2"
onclick="save(105521,-2,this);">
</label>Out of stock
<label>
<input type="radio" name="target_105521" value="-1"
onclick="save(105521,-1,this);">
</label>Unknown
</td>
</tr>
</table>
</p>
</div>
<p>
</p>
<script>
function save(avail_id, map_id, radio) {
//some api call...
// change background color
var $changed_tr = $(radio).closest('td').closest('tr');
$changed_tr.css("bgcolor", "72ff76");
}
</script>
答案 0 :(得分：2)
您的代码存在问题，因为CSS属性名称为background-color，而不是bgcolor。十六进制颜色值也应该有一个#前缀，如下所示：
$changed_tr.css("background-color", "#72ff76");
另请注意，由于p元素不能包含table，因此您的HTML无效。您还可以将文本放在label元素中以展开复选框的命中区域。我还建议您修改代码以使用不显眼的事件处理程序而不是过时的onclick事件属性，如下所示：
$('table input').change(function() {
//some api call...
var $changed_tr = $(this).closest('tr');
$changed_tr.css("background-color", "#72ff76");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
<tr>
<td>yyy
</td>
<td>
<label>
<input type="radio" name="target_105146" value="-11" data-availid="105146" />
Discontinued
</label>
<label>
<input type="radio" name="target_105146" value="-8" data-availid="105146" />
Future product
</label>
<label>
<input type="radio" name="target_105146" value="-6" data-availid="105146" />
In store only
</label>
<label>
<input type="radio" name="target_105146" value="-5" data-availid="105146" />
In Stock
</label>
<label>
<input type="radio" name="target_105146" value="-4" checked data-availid="105146" />
Delayed delivery
</label>
<label>
<input type="radio" name="target_105146" value="-2" data-availid="105146" />
Out of stock
</label>
<label>
<input type="radio" name="target_105146" value="-1" data-availid="105146" />
Unknown
</label>
</td>
</tr>
<tr>
<td>xxx</td>
<td>
<label>
<input type="radio" name="target_105521" value="-11" data-availid="105521" />
Discontinued
</label>
<label>
<input type="radio" name="target_105521" value="-8" data-availid="105521" />
Future product
</label>
<label>
<input type="radio" name="target_105521" value="-6" checked data-availid="105521">
In store only
</label>
<label>
<input type="radio" name="target_105521" value="-5" data-availid="105521" />
In Stock
</label>
<label>
<input type="radio" name="target_105521" value="-4" data-availid="105521" />
Delayed delivery
</label>
<label>
<input type="radio" name="target_105521" value="-2" data-availid="105521" />
</label>
Out of stock
<label>
<input type="radio" name="target_105521" value="-1" data-availid="105521" />
Unknown
</label>
</td>
</tr>
</table>
答案 1 :(得分：0)
如前所述，bgcolor不是有效的CSS属性，但是'background-color'是。可以通过驼峰式变体访问连字符CSS属性。这意味着“background-color”可以作为“backgroundColor”访问。
TLDR：$changed_tr.css('backgroundColor', 'red')
答案 2 :(得分：0)
function save(avail_id, map_id, radio) {
//some api call...
// change background color
var $changed_tr = $(radio).parents('tr'); // tr is ancestor
$changed_tr.css("background", "red");
}
将代码更改为此。使用'background'属性和颜色格式不正确。