jQuery：用于侦听表中每个复选框的函数_Jquery_Checkbox_Html Table

jQuery：用于侦听表中每个复选框的函数

jquery checkbox

jQuery：用于侦听表中每个复选框的函数,jquery,checkbox,html-table,Jquery,Checkbox,Html Table,我生成此表：为此： $.ajax({ type: "POST", url: action, data: dataToSearchProfile, dataType: "json", success: function(response) { if(response.success == "success") { $('#rBuscarPerfil tr:gt(0)').remove();

我生成此表：

为此：

$.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({
类型：“POST”，
url:action，
数据：dataToSearchProfile，
数据类型：“json”，
成功：功能（响应）{
如果（response.success==“success”）{
$（“#rBuscarPerfil tr:gt（0）”）.remove（）；
$。每个（响应、功能（索引、记录）{
变量行=$（“”）；
$（“”）.text（record.NomPerfil）.appendTo（row）；
$（“”）.text（record.DesPerfil）.appendTo（row）；
$（“”）.html（“”）.appendTo（行）；
if（record.EdoPerfil==1）{
$（“”）.html（“”）.appendTo（行）；
css（“背景色”，“bbf2b5”）；
}否则{
$（“”）.html（“”）.appendTo（行）；
css（“背景色”，“fcbfc4”）；
}
第行。附录（“#rBuscarPerfil”）；
});
}否则{
$（'#errorSearchProfile'）.html（“No se han encontrado resultados para:“+termSearch+”）.css（“color”，“red”）；
}
}
});

当用户签入表中的任何复选框时，将执行一条从更改背景到行的指令（如果选中绿色，如果未选中红色），然后将执行另一个函数ajax来更新数据库中的记录等等。。但我最感兴趣的是知道如何倾听每个复选框来执行指令

我希望你能帮助我

您不能在调用函数的复选框中添加onclick标记吗

所以它就像：

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

你不能在你的复选框中添加一个onclick标签来调用函数吗

所以它就像：

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

只需在您的表上单击

#rBuscarPerfil

，为

添加一个代理即可。因为您正在动态创建行。您在行本身上创建的任何事件（在创建它们之前）都将不起作用
演示：
剧本
$（'rBuscarPerfil'）。在（'click'，'input[type=“checkbox”]”上，函数（）{
$（this）.closest（'tr'）.toggleClass（'green'）；
});

HTML

1.
2.
3.


CSS
tr{
背景色：红色；
}
格林先生{
背景色：绿色！重要；
}
只需将的委托人单击表上的#rBuscarPerfil
。因为您正在动态创建行。您在行本身上创建的任何事件（在创建它们之前）都将不起作用
演示：
剧本
$（'rBuscarPerfil'）。在（'click'，'input[type=“checkbox”]”上，函数（）{
$（this）.closest（'tr'）.toggleClass（'green'）；
});

HTML

1.
2.
3.


CSS
tr{
背景色：红色；
}
格林先生{
背景色：绿色！重要；
}
这是您需要的完整解决方案。它将根据复选框“当前状态”根据“已选中”“未选中”执行操作
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>

jQuery:
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;
}

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

    });
});

我已经在
上为上述问题创建了垃圾箱，这是您需要的完整解决方案。它将根据复选框“当前状态”根据“已选中”“未选中”执行操作
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>

jQuery:
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;
}

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

    });
});

我已经为上述问题在
上创建了垃圾箱使用事件。使用事件。但是$（this）.closest（'tr'）.toggleClass（'green'）；不在$.ajax函数中工作。@SoldierCorp不要将该函数放在$.ajax（）函数中。把它放在代码的其他地方。我有它，但在通过ajax函数进行更新后，如果选中或不选中，颜色必须分别变为绿色或红色not@SoldierCorp创建类时，您需要将类添加到
（或
，无论您在哪里使用颜色），就像我在示例中所做的那样。但是$（this）.closest（'tr'）.toggleClass（'green'）；不在$.ajax函数中工作。@SoldierCorp不要将该函数放在$.ajax（）函数中。把它放在代码的其他地方。我有它，但在通过ajax函数进行更新后，如果选中或不选中，颜色必须分别变为绿色或红色not@SoldierCorp创建类时，您需要向
（或
，无论您在哪里使用颜色）添加类，就像我在示例中所做的那样。