-2

特定の div ID の下にある複数の div に次の CSS を適用しようとしています。

.strikeout
{
    background : blue;
}

次の JavaScript コードを使用して、グリッドで選択した行の色を変更しています。

$("#jqxGridInvoiceEntry").on("cellvaluechanged", function (event){
    var rowindex = event.args.rowindex;
    var checkboxState=event.args.value;
    var rowTag=$("#row"+rowindex+"jqxGridInvoiceEntry div");

    if(checkboxState==true)
    {
        rowTag.addClass("strikeout");
    }
    else
    if(checkboxState==false)
    {
        rowTag.removeClass("strikeout");
    }
});

以下のスクリーンショットを参照してください。最初の行のチェックボックスを選択すると、背景色が青に変わります。問題は、2 行目のチェックボックスを選択すると、背景色が青に変わりますが、以前に選択した行の背景色が消えてしまうことです。最初の行 ID は row0jqxGridInvoiceEntry になり、後続の行も同様になります。

ここに画像の説明を入力

JQWidgets フレームワークを使用しています。HTMLコードは、

<div style="float: left;" id="jqxGridInvoiceEntry"></div>
4

4 に答える 4

0

投稿したコードから判断すると、唯一の可能性はcellvaluechanged、最初の行でもイベントが発生することです。おそらく、2 行目の他のチェックボックスをオンにすると、そのチェックボックスがオフになっているためです。

このコード:

else
if(checkboxState==false)
{
    rowTag.removeClass("strikeout");
}

背景色を削除します。

于 2014-06-11T08:14:32.203 に答える
0

jquery の実装方法は少しわかりにくいと思います。ここでは、同じ結果を実装する別の方法を使用しています。

HTML

 <table cellpadding="0" cellspacing="0" border="0" width="100%" id="MainTable">
<tr>
    <td>First</td> 
    <td><input type='checkbox'  /></td>
    <td>Some INformation</td>
    <td>Testing</td>
</tr>
<tr>
    <td>Second</td> 
    <td><input type='checkbox' /></td>
    <td>Some INformation</td>
    <td>Testing</td>
</tr>
<tr>
    <td>Third</td> 
    <td><input type='checkbox' /></td>
    <td>Some INformation</td>
    <td>Testing</td>
</tr>
</table>

CSS

 table
 {
 border-top:1px solid #000;
 border-right:1px solid #000;
 }
 table td
 {
border-bottom:1px solid #000;
 border-left:1px solid #000;
 }
 .green
{
  background-color:green;
 }

Jクエリ

 $('#MainTable input[type=checkbox]').on('click',function(){
    $(this).parent().toggleClass('green').siblings().toggleClass('green');
  });

ワーキングJSFIDDLEデモ

于 2014-06-11T08:39:08.527 に答える