I'm trying to target a parent from a link with a jQuery function, at first to get its innerHtml but now, just to get its value.

However, I can't manage to track it and I've been putting way too much time on this simple problem.

Here's my html :

<table>
  <tr>
      <td title="td_title_1" value="td_value_1">Some text<a href="#" title="Copy">Element_1</a></td>
      <td title="td_title_2" value="td_value_2">Some other text<a href="#" title="Copy">Element_2</a></td>
  </tr>
</table>

And my jQuery:

$(function(){
    $("*").on('click','a[title="Copy"]',function(){
        var clipboard = $(this).parent('td').find('[title="td_title1"]').val();
        alert(clipboard);
    });
});

I tried parent(), parents(), closest()... I'm still getting "undefined" value. And yeah, the jQuery lib is added.

Also, how would you get the "Some text" part?

Thanks for your time.

I'm trying to target a parent from a link with a jQuery function, at first to get its innerHtml but now, just to get its value.

However, I can't manage to track it and I've been putting way too much time on this simple problem.

Here's my html :

<table>
  <tr>
      <td title="td_title_1" value="td_value_1">Some text<a href="#" title="Copy">Element_1</a></td>
      <td title="td_title_2" value="td_value_2">Some other text<a href="#" title="Copy">Element_2</a></td>
  </tr>
</table>

And my jQuery:

$(function(){
    $("*").on('click','a[title="Copy"]',function(){
        var clipboard = $(this).parent('td').find('[title="td_title1"]').val();
        alert(clipboard);
    });
});

I tried parent(), parents(), closest()... I'm still getting "undefined" value. And yeah, the jQuery lib is added.

Also, how would you get the "Some text" part?

Thanks for your time.

• javascript
• jquery

• 2 There is no val() to get, that's why it returns undefined. – Ionut Necula Commented Nov 26, 2018 at 9:30
• 1 There's also a small typo - title="td_title1" should be title="td_title_1" or vice versa – Christheoreo Commented Nov 26, 2018 at 9:34
• 1 always try to search by specific attr or prop not by find function as it will find all elements that it can reach upto (for optimization purpose.) – Dhiren Commented Nov 26, 2018 at 9:40

5 Answers 5

value is not a valid property for td or anything else but input. You had to use data-value to be correct.

HTML:

<table>
    <tr>
        <td title="td_title_1" data-value="td_value_1">Some text<a href="#" title="Copy">Element_1</a></td>
        <td title="td_title_2" data-value="td_value_2">Some other text<a href="#" title="Copy">Element_2</a></td>
    </tr>
</table>

JS:

$(function(){
    $(document).on('click','a[title="Copy"]', function(){
        var clipboard = $(this).parent().data('value');
        alert(clipboard);
    });
});

* (star selector) is a tricky selector. Do not use it in every purpose.

The first thing is you need to use stopPropagation() so that it works only for the element you desire and the next thing is you can use the simple way to clone the element so that you get only the text part of <td> element that is the immediate parent of the clicked element.

$(function() {
  $("*").on('click', 'a[title="Copy"]', function(e) {
    var clipboard = $(this).parent('td')
      .clone() //clone the element
      .children() //select all the children
      .remove() //remove all the children
      .end() //again go back to selected element
      .text();
    alert(clipboard);
    e.stopPropagation();
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td title="td_title_1" value="td_value_1">Some text<a href="#" title="Copy">Element_1</a></td>
    <td title="td_title_2" value="td_value_2">Some other text<a href="#" title="Copy">Element_2</a></td>
  </tr>
</table>

Simply use $(this).parent().attr('value');

$(function(){
    $(document).on('click','a[title="Copy"]',function(e){
        var clipboard = $(this).parent().attr('value');
        alert(clipboard);
         e.stopPropagation();
    });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
      <td title="td_title_1" value="td_value_1">Some text<a href="#" title="Copy">Element_1</a></td>
      <td title="td_title_2" value="td_value_2">Some other text<a href="#" title="Copy">Element_2</a></td>
  </tr>
</table>

$(function(){
    $("*").on('click','a[title="Copy"]',function(){
        var clipboard = $(this).parent('td').filter('[title="td_title1"]').attr('value');
        alert(clipboard);
    });
});

You should try with filter. Find function is for finding children, your intent is to filter the tds based on the criteria, and also change the val to .attr('value'), since .val is only for inputs only, but to read any attribute use attr

try

alert($(this).parent('td').attr('value'));