使用jQuery从表的最后一个tr获取属性

Question

Got stuck a bit in this jquery script.I want to get the link attribute of the last td in the tr on check of the check box. Here is the HTML

      <tr>
          <td><input type="checkbox" name="check" value="happy"></td>
          <td style="width: 310px; line-height: 14px;" class="fileName <?php echo $myClass; ?>" ><div style="width: 310px; overflow: hidden;"><a href="https://abcd.com/<?php echo $info."/".$myinfo['name'];?>" title="<?php echo $myinfo['name'];?>" target="_blank"><?php echo $fileName.'.'.$fileExtension; ?></a></div></td>
           <td style="width: 150px;"><?php echo $fileSize; ?> KB</td>
           <td style="width: 150px;"><?php echo $fileModified; ?></td>
           <td style="width: 150px;">
               <a href="javascript:void(0);" ><span id="" link="https://abcd.com/<?php echo $info."/".$myinfo['name'];?>" title="<?php echo $myinfo['name'];?>" class="shareIcon"></span></a>
               <a href="javascript:void(0);"><span id="deleteIcon" link="<?php echo $myBucket['name'];?>" class="deleteIcon"></span></a>
           </td>
         </tr>

I want to get each of the link attribute in the last td when more than one checkbox are.
What I tried is this

   $("input[name='check']").on('change',function() {
   var checked = $("input[name='check']:checked");
   // console.log(checked);
   $.each(checked,function(){ 
   //console.log(checked.length); 
   if(checked.length>1){
          //  console.log('more than 1');             
          //console.log(checked.parents('td').siblings('.shareIcon'));
          checked.parents('td').siblings('.shareIcon'),function(){
          console.log($(this).attr('link'));

          }      
      } 
   })
 });

Answer 1

There are several mistakes:
1) Validate your html, improper closing of input tag. This leads the following

checked.parent()  //points the body not its actual td

2) Proper way of escaping / characters.

link="https://abcd.com/<?php echo $info."/".$myinfo['name'];?>"  //WRONG

3) The below code will point only td parent of input , so it fails

checked.parents('td').find('.shareIcon').attr('link')

Finally, there is no need to iterate inorder to get the last td you can use :last like

 $("input[name='check']").on('change',function() {
   var checked = $("input[name='check']:checked");
     console.log(checked.parents('tr')
                           .find('td:last')
                           .find('.shareIcon').attr('link'));
 });

Updated JSFiddle

Answer 2

Try this script:

 $("input[name='check']").on('change', function () {
     var checked = $("input[name='check']:checked");
     $.each(checked, function () {
         if (checked.length >= 1) {
             $.each(checked.parent().siblings().last().children().children(), function() {
                 console.log($(this).data("link"));
             });
         }
     })
 });

And this HTML:

<table>
    <tr>
        <td>
            <input type="checkbox" name="check" value="happy">
        </td>
        <td style="width: 310px; line-height: 14px;" class="fileName <?php echo $myClass; ?>">
            <div style="width: 310px; overflow: hidden;"><a href="https://abcd.com/areeb" title="areeb" target="_blank">some_file.php</a>

            </div>
        </td>
        <td style="width: 150px;">212KB</td>
        <td style="width: 150px;">some_file.php</td>
        <td style="width: 150px;"> <a href="javascript:void(0);"><span id="" data-link="https://abcd.com/areeb" title="<?php echo $myinfo['name'];?>" class="shareIcon"></span></a>
 <a href="javascript:void(0);"><span id="deleteIcon" data-link="<?php echo $myBucket['name'];?>" class="deleteIcon"></span></a>

        </td>
    </tr>
</table>

Fiddle

---

Code Explanation:

---

JavaScript Code:

I have just changed you if condition a little bit so that it can match even one element as well. Then the $.each() function is also changed a little bit. I am first targetting the parent, td , of your checkbox then I am getting all it's siblings then I select the last sibling then I pop in into it's children that are a or anchor tags and then I pop into the children of those a s aswell that are the span s and then for each of the span I log it's data-link attribute.

HTML Code:

I have just changed the name of the link attribute to data-link attribute for easier access through the data function.

Answer 3

var inputs = $('input[name="check"]').on('change', function () {
    inputs.each(function () {
        var i = $(this);

        if (i.is(':checked')) {
            console.log(i.closest('tr').find('.shareIcon').attr('link'));
        }
    });
});

fiddle