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 ：添加替代版本，简化

Answer 2

<script type="text/javascript">
$(document).on("click", ".mail", function ()
{
    var emailList = [];
    var selectedRows = $( 'table._tm' ).find( 'tbody' ) // select table body and
        .find( 'tr' ) // select all rows that has
        .has( 'input[type=checkbox]:checked' ) // checked checkbox element

          selectedRows.each(function(idx, elem) {
              var email = jQuery(elem).find('input[type="checkbox"]').data("mail");
               emailList.push(email);
          });
          console.log( 'elem:', emailList );
} );

Answer 3

这应该很容易尝试这样的事情：

var emailList = [];

selectedRows.forEach(function(idx, elem) {
    var email = jQuery(elem).data("mail");
    emailList.push(email);
});

如果检查行，则循环遍历表并将特定单元格存储在数组中

3 个答案: