单击 td 中的单选按钮时更改表格行颜色

Question

好吧，伙计们，我今天有一些非常具有挑战性的事情。

我有一个有两个单元格的表格。在每一行的第二个单元格中，我有一个单选按钮。我希望能够在单击单选按钮时更改行的颜色。

为此，我将参数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>

Answer 1

您的代码存在问题，因为 CSS 属性名称是 background-color，而不是 bgcolor。十六进制颜色值也应该有一个# 前缀，像这样：

$changed_tr.css("background-color", "#72ff76");

另请注意，您的 HTML 无效，因为 p 元素不能包含 table。您还可以将文本放置在 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>

Answer 2

如前所述，bgcolor 不是有效的 CSS 属性，但 'background-color' 是。带连字符的 CSS 属性可以通过驼峰式变体访问。这意味着“背景颜色”可以作为“背景颜色”访问。

TLDR：$changed_tr.css('backgroundColor', 'red')

Answer 3

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"); 
 }

将代码更改为此。使用“背景”属性，颜色格式不正确。