Choosing an element beneath a table row using a different element as a reference

Question

Choosing an element beneath a table row using a different element as a reference

I'm attempting to identify the checkboxes associated with the link containing delete.jpg. Here's what I've tried so far:

<table>
  <tr class="odd">
    <td><input id="cbox1" type="checkbox"></input></td>
    <td>some info here</td>
    <td>some info here</td>
    <td>some info here</td>
    <td><a href="www.example.com"><img src="delete.jpg" alt="Delete"></img></a></td>
  </tr>
  <tr class="even">
    <td><input id="cbox2" type="checkbox"></input></td>
    <td>some info here</td>
    <td>some info here</td>
    <td>some info here</td>
    <td><a href="www.example.com"><img src="delete.jpg" alt="Delete"></img></a></td>
  </tr>
</table>

var x = window.content.document.querySelectorAll("input[type='checkbox' img[alt='Delete']");

Unfortunately, this doesn't seem to be working and it appears as though the image is being treated as part of the input element.

My goal is to find the ID of the checkbox in a row where there is a delete.jpg image. Just a reminder that the image is enclosed within a link.

I would appreciate any insights or suggestions, preferably in JavaScript. jQuery can also be an option. Thank you in advance!

javascript

Answer 1

Answer №1

To achieve this functionality, you can add a click event listener to the a tag that surrounds the img. Using the this keyword, you can reference the clicked element, then utilize closest() method to target the parent tr, and finally use find() to access the checkbox.

It's important to rectify the HTML errors in your code; self-closing tags like <img> and <input> do not need closing tags like </img> or </input>. Consider the following revised code:

$('table a').click(function(e) {
  e.preventDefault(); // prevent default link behavior
  
  var $tr = $(this).closest('tr');
  var $checkbox = $tr.find(':checkbox');
  
  console.log($checkbox.prop('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="odd">
    <td><input id="cbox1" type="checkbox" /></td>
    <td>some info here</td>
    <td>some info here</td>
    <td>some info here</td>
    <td><a href="www.example.com"><img src="delete.jpg" alt="Delete"></a></td>
  </tr>
  <tr class="even">
    <td><input id="cbox2" type="checkbox" /></td>
    <td>some info here</td>
    <td>some info here</td>
    <td>some info here</td>
    <td><a href="www.example.com"><img src="delete.jpg" alt="Delete"></a></td>
  </tr>
</table>

Answer 2

To achieve this functionality, you can add a click event listener to the a tag that surrounds the img. Using the this keyword, you can reference the clicked element, then utilize closest() method to target the parent tr, and finally use find() to access the checkbox.

It's important to rectify the HTML errors in your code; self-closing tags like <img> and <input> do not need closing tags like </img> or </input>. Consider the following revised code:

$('table a').click(function(e) {
  e.preventDefault(); // prevent default link behavior
  
  var $tr = $(this).closest('tr');
  var $checkbox = $tr.find(':checkbox');
  
  console.log($checkbox.prop('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="odd">
    <td><input id="cbox1" type="checkbox" /></td>
    <td>some info here</td>
    <td>some info here</td>
    <td>some info here</td>
    <td><a href="www.example.com"><img src="delete.jpg" alt="Delete"></a></td>
  </tr>
  <tr class="even">
    <td><input id="cbox2" type="checkbox" /></td>
    <td>some info here</td>
    <td>some info here</td>
    <td>some info here</td>
    <td><a href="www.example.com"><img src="delete.jpg" alt="Delete"></a></td>
  </tr>
</table>

Answer 3

Answer №2

Follow these steps to solve the problem: $("img[alt='Delete']").parent().parent().parent().find("input")

Answer 4

Follow these steps to solve the problem: $("img[alt='Delete']").parent().parent().parent().find("input")

Answer 5

Answer №3

Behold the power of jQuery:

    $('img[src="delete.jpg"]').each(function(){
      var img = $(this);
      var identifier = img.closest('tr').find('input').attr('id');
      console.log( img, identifier );
    });

// Storing the id in image element:
    window.image_ids = [];

    $('img[src="delete.jpg"]').each(function(){
      var img = $(this); // reference to image
      var identifier = img.closest('tr').find('input').attr('id');
      img.data('element_id', identifier);
      image_ids.push(identifier);
    });

    // Accessing the id
    $('img[src="delete.jpg"]:first').data('element_id');
    // or
    console.log(image_ids);

Answer 6

Behold the power of jQuery:

    $('img[src="delete.jpg"]').each(function(){
      var img = $(this);
      var identifier = img.closest('tr').find('input').attr('id');
      console.log( img, identifier );
    });

// Storing the id in image element:
    window.image_ids = [];

    $('img[src="delete.jpg"]').each(function(){
      var img = $(this); // reference to image
      var identifier = img.closest('tr').find('input').attr('id');
      img.data('element_id', identifier);
      image_ids.push(identifier);
    });

    // Accessing the id
    $('img[src="delete.jpg"]:first').data('element_id');
    // or
    console.log(image_ids);

Choosing an element beneath a table row using a different element as a reference

Answer №1

Answer №2

Answer №3

Similar questions

Is there a solution to prevent the "NavigationDuplicated" error in Vue.js when adding query parameters to the URL without changing the path?

Failing to utilize callback functions results in forgetting information

Tips for successfully transferring values from an onclick event in JavaScript to a jQuery function

How can I combine multiple styles using Material-UI themes in TypeScript?

Struggling to pass two objects as props and have them be equated to one another

Is FIREFOX better with plugins or extensions?

Ways to dynamically retrieve a key value pair in JavaScript and React

I have an npm package that relies on X (let's say material-ui). What is the best way to prevent users from having to install

Directive unable to recognize ng-pattern functionality

The functionality of the date picker is hindered when a dropdown with multiple selections is activated, and conversely, the multi-selection feature of

Incorrect Request Method for WCF json POST Request Leads to 405 Error (Method Not Allowed)

Enhancing the menu/navigation bar with individual AJAX loaders

Protractor tests succeeding prior to complete page load

Utilizing Windows Azure and restify for node.js Development

Components undergo a style transformation with Material UI

Data is present in a JavaScript array, yet it is returning a value of

Is there a way to prevent a web page from automatically refreshing using JavaScript?

Recording a specialized event sent from a web component to React

Adding div elements using checkbox switch

The border of the Material UI Toggle Button is not appearing