0

私はこのテーブルを生成します：

各チェックボックス テーブル

これとともに：

$.ajax({
    type: "POST",
    url: action,
    data: dataToSearchProfile,
    dataType: "json",
    success: function(response) {

       if(response.success == "success") {
             $('#rBuscarPerfil tr:gt(0)').remove();
             $.each(response, function (index,record){
                 var row = $("<tr class='"+record.IdPerfil+"'/>");
                 $("<td />").text(record.NomPerfil).appendTo(row);
                 $("<td />").text(record.DesPerfil).appendTo(row);
                 $("<td />").html("<a href='#'>Modificar</a>").appendTo(row);
                 if (record.EdoPerfil == 1) {
                    $("<td />").html("<input class='"+record.IdPerfil+"' type='checkbox' checked/>").appendTo(row);
                    row.css("backgroundColor","#bbf2b5");
                 } else {
                      $("<td />").html("<input class='"+record.IdPerfil+"' type='checkbox' />").appendTo(row);
                      row.css("backgroundColor","#fcbfc4");
                 }
                 row.appendTo("#rBuscarPerfil");
            });
       } else {
             $('#errorSearchProfile').html("No se han encontrado resultados para: <b>"+termSearch+"</b>").css("color","red");
       }
  }

});

そして、ユーザーがテーブルのチェックボックスをチェックすると、背景を行に変更する命令が実行され（チェックされている場合は緑、チェックされていない場合は赤）、データベースなどのレコードを更新するために別の関数ajaxが実行されます..しかし、私が興味を持っているのは何ですかほとんどの場合、各チェックボックスをリッスンして命令を実行する方法を知っています。

私は私を助けてくれることを願っています！

4

4 に答える 4

2

ここにあなたが必要とする完全な解決策があります。チェックボックスの現在のステータスに基づいて、チェックされているかどうかに基づいて処理を行います。

HTML

<table id="rBuscarPerfil" width="90%">
  <tr>
    <th>
      NOMBRE
    </th>
    <th>
      DESCRIPTION
    </th>
    <th>
      ACTION
    </th>
    <th>
      ACTIVO
    </th>
  </tr>

  <tr>
    <td class="red">
      Perfil Uno
    </td>
    <td class="red">
      Description Del Perfil Uno
    </td>
    <td class="red">
      <input type="button" value="Modificar"/>
    </td>
    <td class="red">
      <input type="checkbox" name="chk1" />
    </td>
  </tr>
  <tr>
    <td class="red">
      Perfil Dos
    </td>
    <td class="red">
      Description Del Perfil Dos
    </td>
    <td class="red">
      <input type="button" value="Modificar"/>
    </td>
    <td class="red">
      <input type="checkbox" name="chk1" />
    </td>
  </tr>
  <tr>
    <td class="red">
      Perfil20
    </td>
    <td class="red">
      Description Del Perfil20
    </td>
    <td class="red">
      <input type="button" value="Modificar"/>
    </td>
    <td class="red">
      <input type="checkbox" name="chk1" />
    </td>
  </tr>
</table>

CSS:

table#rBuscarPerfil{
  border:2px solid #ddd;
  font-family:Helvetica;
  font-size:12px;

}

table#rBuscarPerfil th{
  border:1px solid #ddd;
  font-size:14px;

  background-color:#224488;
  color:#ddd;
  padding:5px;
}
table#rBuscarPerfil td{
  text-align:center;
  border:1px solid #ddd;
  padding:1px;
}
table#rBuscarPerfil td.red{
  background:#f698aa;
}
table#rBuscarPerfil td.green{
  background:#a5f6a8;
}
table#rBuscarPerfil input[type=button]{
  border:1px solid #333;
  background:#dcdcdc;
}

jQuery:

$(function() {
    $("table#rBuscarPerfil input[type=checkbox]").change(function() {
        if ($(this).is(":checked")) {
            $(this).closest("tr").find("td").each(function() {
                $(this).removeClass("red");
                $(this).addClass("green");

            });
        } else {
            $(this).closest("tr").find("td").each(function() {
                $(this).removeClass("green");
                $(this).addClass("red");
            });
        }

    });
});

http://codebins.com/bin/4ldqpa6で上記の問題のビンを作成しました

于 2012-07-19T13:48:08.303 に答える
2

clickテーブルにデリゲートを配置するだけ#rBuscarPerfilです。行を動的に作成しているため。行自体に (作成前に) 作成したイベントは機能しません。

デモ: http://jsfiddle.net/ThinkingStiff/Y355x/

脚本

$( '#rBuscarPerfil' ).on( 'click', 'input[type="checkbox"]', function() {
    $( this ).closest( 'tr' ).toggleClass( 'green' );
});​

HTML

<table id="rBuscarPerfil">
    <tr class="green"><td>1</td><td><input class="1" type="checkbox" checked/></td></tr>
    <tr><td>2</td><td><input class="1" type="checkbox"/></td></tr>
    <tr class="green"><td>3</td><td><input class="1" type="checkbox" checked/></td></tr>
</table>​

CSS

tr {
    background-color: red;
}

.green {
    background-color: green !important;
}​
于 2012-07-19T02:35:20.870 に答える
0 
$('body').on('change','#rBuscarPerfil input[type="checkbox"]',function(){
//your stuff
});
于 2012-07-19T02:36:12.467 に答える
0

関数を呼び出す onclick タグをチェックボックスに追加することはできませんか?

そのように：

$("<td />").html("<input onclick='javascript:doSomething(this);' class='"+record.IdPerfil+"' type='checkbox' checked/>").appendTo(row);

そして機能を持っています

function doSomething(checkbox) {

}
于 2012-07-19T02:19:07.833 に答える