Question

我目前正在开发一个使用json填充表（使用dynatable jquery插件）的Web应用程序。

我的一个需求是将复选框绑定到特定列（电子邮件），并能够检索所选地址列表并将其转换为逗号分隔字符串。

这是我第一次积极撰写一些javascript，而我目前所做的每一次尝试都失败了。

我使用以下方法创建复选框：

$(".sth:nth-child(5)").prepend("<input type='checkbox' name='mailcheck' id='cbe'> ");

其中sth是分配给每个td的类。

但不知道如何继续，我已尝试创建onclick事件，但我不知道如何将事件绑定到控件。

有人有想法吗？

提前致谢！

编辑：

这是一个td +复选框的示例（同样，通过dynatable和javascript生成）

 <td class="sth" style="text-align: left;" abp="61"><input name="mailcheck" id="cbe" onclick="ocEvent()" type="checkbox" abp="62"> am.marzano@gmail.com</td>

Answer 1

由于您要checkbox动态添加table，因此可以将clickevent附加到class，如下所示：

当您预先添加一个名为checkbox的属性到$(".sth:nth-child(5)").prepend('<input type="checkbox" class="chkadd" name="mailcheck" id="cbe">');

时

change

添加checkbox事件以动态添加$(document).on('change','.chkadd',function(){ //do required stuffs here });

$(document)

而不是$('#yourTableID')您可以使用emailAddress

<强>更新

要获得已添加checkbox的每一行的emailAddress，您可以按以下方式执行此操作：

假设您已将$(document).on('change','.chkadd',function(){ var email = $(this).parent().closest('tr').find('td:nth-child(3)').text(); });置于第3列

nth-child(3)

根据列

更改if()内的数字

Answer 2

首先，id必须是唯一的。因此，由于您附加了复选框的多个实例，因此最好使用类而不是ID。

此外，您可以创建一个模板复选框，并将其副本附加到TD

＆＃13;

var selected_emails = "";
$(function() {
  //create a template checkbox
  var $checkBox = $("<input type='checkbox' class='cbe'/>");
  //append a click handler to it
  $checkBox.on("click", getList);
  //append a copy of the checkbox to each 5th td
  //the booleans mean copy with the attached events
  $("#myTable tr td:nth-child(5)").prepend($checkBox.clone(true, true));

});

//this function will run each time a checkbox is clicked
function getList() {
  //get a list of all TD, use filter to keep only those that have
  //a checked checkbox in them, then use map and get to retrieve the 
  //text inside that TD, and join the texts into one comma separated string
  selected_emails = $("#myTable tr td").filter(function() {
    return $(this).find(".cbe:checked").length > 0;
  }).map(function() {
    return $(this).parent().text().replace(/[\n ]/g, "");
  }).get().join(",");

 $("#Emails").text(selected_emails);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>email_1@mail.com</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>email_2@mail.com</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>email_3@mail.com</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>email_4@mail.com</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>email_5@mail.com</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>email_6@mail.com</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>email_7@mail.com</td>
  </tr>
</table>

<div id="Emails"></div>

＆＃13;

将复选框绑定到td元素

2 个答案: