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

时间：2017-12-21 15:57:02

标签： jquery html

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

我有一张有两个牢房的桌子。在每行的第二个单元格中，我有一个单选按钮。我想能够在单击单选按钮时更改行的颜色。

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

3 个答案:

答案 0 :(得分：2)

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

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

另请注意，由于p元素不能包含table，因此您的HTML无效。您还可以将文本放在label元素中以展开复选框的命中区域。我还建议您修改代码以使用不显眼的事件处理程序而不是过时的onclick事件属性，如下所示：

＆＃13;
＆＃13; 
$('table input').change(function() {
  //some api call...
  
  var $changed_tr = $(this).closest('tr');
  $changed_tr.css("background-color", "#72ff76");
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 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'属性和颜色格式不正确。

相关问题
最新问题