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

Question

I currently have a table that is triggered by a drop down. Inside the table, there's a checkbox. When the check box is checked and the user clicks on the confirm button, the code should loop through the table and get the email values of all the checked rows and store them in an array. So far, it can check if the rows are checked. I've found a few ways online but its not working. Here's the table:

    <?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 } ;?>

Here's the little script I've used:

    <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>

My JS isn't so good.

Lastly, heres the php end

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

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

        print_r($array);

Answer 1

First, you should add a way to "find" the email value of a row. So edit the html with something like that :

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

Now, I think there is a small error in your code, an html id is targetable by # and a class by a . . So with my changement I propose :

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

---

Alter solution

Add the email in data parameters of the checkbox

<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':''; ?> >

Then, the javascript become quite simple :

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

update : oops, it's parents *, parent can't go upper than one level...

update2 : Add an alternative version, simplified

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

This should be quite easy try something like this:

var emailList = [];

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