皆さん、今日は本当にやりがいのあることがあります。
2つのセルを持つテーブルがあります。すべての行の2番目のセルには、ラジオボタンがあります。ラジオボタンがクリックされるたびに行の色を変更できるようにしたい。
そのために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>コードの問題は、CSSプロパティ名がbackground-colorではなくであるためbgcolorです。16進色の値にも#、次のような接頭辞を付ける必要があります。
$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>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加