javascript - 循环遍历表并将特定单元格存储在数组中(如果选中行)

Question

我目前有一个由下拉菜单触发的表格。在表格内，有一个复选框。当复选框被选中并且用户单击确认按钮时，代码应该遍历表并获取所有选中行的电子邮件值并将它们存储在数组中。到目前为止，它可以检查行是否被检查。我在网上找到了几种方法，但它不起作用。这是表格:

    <?php if ($picked != null){ ;
      foreach ($picked as $rows): ?> 
        echo base_url(); ?>employer/view/send/<?php echo $rows['username']; ?>-->
      <!--form action="" method="POST"--> 
      <?php endforeach; ?>
      <table id="view_add" 
        class="table dataTable table-striped table-dynamic table-hover _tm">
        <thead>
          <tr>
            <th class="sorting_asc" tabindex="0" rowspan="1" colspan="1"
              style="width: 250px;">
              Applicant Name
            </th>
            <th class="sorting" tabindex="0" rowspan="1" colspan="1"
              style="width: 200px;">
              Employer
            </th>
            <th class="sorting" tabindex="0" rowspan="1" colspan="1"
              style="width: 200px;">
              Post Header
            </th>
            <th class="sorting_asc" tabindex="0" rowspan="1" colspan="1"
              style="width: 450px;">
              Description
            </th>
            <th class="sorting_asc" tabindex="0" rowspan="1" colspan="1"
              style="width: 100px;">
              VIEW CV
            </th>
            <th class="sorting_asc" tabindex="0" rowspan="1" colspan="1" 
              style="width: 100px;">
            </th>
          </tr>
        </thead>
        <tbody>
          <?php foreach ($picked as $rows): ?> 
          <tr>
            <td><?php echo $rows['applicantName']; ?></td>
            <td><?php echo $rows['employerName']; ?></td>
            <td><?php echo $rows['postingName']; ?></td>
            <td><?php echo $rows['postDescription']; ?></td>
            <td style="display: none;"><?php echo $rows['email']; ?></td>
            <td><a id="stress" data-toggle="modal" href="#editButton" 
              data-full="<?php echo $rows['fullName']; ?>" 
              data-school="<?php echo $rows['institution']; ?>" 
              data-state="<?php echo $rows['state']; ?>" 
              data-location="<?php echo $rows['location']; ?>" 
              data-dob="<?php echo $rows['dob']; ?>" data-skill="<?php echo $rows['skills']; ?>" 
              data-sex="<?php echo $rows['sex']; ?>" data-gpa="<?php echo $rows['cgpa']; ?>" 
              data-call="<?php echo $rows['phone']; ?>" 
              data-like="<?php echo $rows['favoured']; ?>" 
              data-award="<?php echo $rows['awards']; ?>" 
              data-interest="<?php echo $rows['interests']; ?>" class="myeditButton"
            >view</a></td>
            <td>
              <label class="switch m-r-40">
                <input type="checkbox" class="switch-input" 
                  id="<?php echo $rows['applicationKey']?>" 
                  data-mail="<?php echo $rows['email']; ?>" 
                  data-confirm="<?php echo $rows['applicationId']; ?>" 
                  id="check" name="check" <?php echo $rows['status'] ? 'checked':''; ?> >
                <span class="switch-label" data-on="yes" data-off="no"></span>
                <span class="switch-handle"></span>
              </label>
            </td>
          </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
      <div class="form-group">
        <input type="submit" value="Confirm" id="mail" class="btn btn-primary mail">
      </div>
    <!--/form-->
 <?php }else{ ;?>
   <div class="alert alert-warning">
     <h4>There are no current Applicants for this post.</h4>
   </div>'
   <?php } ;?>

这是我用过的小脚本:

    <script>
$(document).on("click", "#mail", function () //<-small mistake here
{
   var mail_list = [];
   $( 'input[type=checkbox]:checked' ).each(
        function(){
            var mail = $(this).data("mail");

            mail_list.push(mail);

            var emailers = mail_list.join(",");

//SEND TO PHP
           $.ajax({
           type: 'post',
           url: '<?php echo base_url(); ?>employer/view/send',
           data: {
                     chosen: emailers
                    },
           success: function( data ) {
                     console.log( data );
                    }
           }); 
            //the END
        }
    )
});
</script>

我的 JS 不太好。

最后，这里是 php 端

else if ($param1 == 'send') 
        {

        $src1= $_POST['chosen'];
        $array = explode(",", $src1);

        print_r($array);

Answer 1

首先，您应该添加一种方法来“查找”一行的电子邮件值。所以用类似的东西编辑 html :

<td style="display: none;" class="email-value">
    <?php echo $rows['email']; ?>
</td>

现在，我认为您的代码中存在一个小错误，html id 可由 # 定位，而 class 可由 .。因此，随着我的改变，我建议:

$(document).on("click", "#mail", function () //<-small mistake here
{
   var mail_list = [];
   $( 'input[type=checkbox]:checked' ).each(
        function(){
            var mail = $(this).parents("tr").find(".email-value").text();
            //this line search the "tr" parent of each input checkbox that's checked, 
            //and then finds the child "email" value of it.
            mail_list.push(mail);
        }
    )
})

---

改变解决方案

在复选框的数据参数中添加邮箱

<input type="checkbox" class="switch-input" 
              id="<?php echo $rows['applicationKey']?>" 
              data-mail="<?php echo $rows['email']; ?>" 
              data-confirm="<?php echo $rows['applicationId']; ?>" 
              data-email="<?= $rows['email']"
              id="check" name="check" <?php echo $rows['status'] ? 'checked':''; ?> >

然后，javascript 变得非常简单:

$(document).on("click", "#mail", function () //<-small mistake here
{
   var mail_list = [];
   $( 'input[type=checkbox]:checked' ).each(
        function(){
            var mail = $(this).data("email");

            mail_list.push(mail);
            //the END
        }
    )
})

更新:糟糕，是parents*，parent 不能超过一级...

update2 : 添加替代版本，简化