Creating a dynamic link based on the value of a previous Class-CodePudding

Hopefully I am using the proper words in my title here.

What I am hoping to achieve is creating a link that varies automatically based on the value of a previously found class. Below is the code I am using, and I'd like the XXXX.jpg to change based on the numbers found in the Class directly before the link.

<?php
    $crim_url = "<a href=../images/vinyl/crim/numbers/XXXX.jpg>Link</a>";
?>

    <tbody>
    <tr>
    <td><? print $bluewhite ?></td><td class=num>0002</td><td>Name</td><td><? print $crim_url ?></td></tr><tr>
    <td><? print $bluewhite ?></td><td class=num>0004</td><td>Name</td><td><? print $crim_url ?></td>
    </tr>
    </tbody>

So in this example, I'd like to have the $crim_url grab the data in the previously found < td class=num> and replace the XXXX.jpg with 0002.jpg and 0004.jpg respectively. I don't even know where to start with this. I have nearly 1000 links, and I'd like to automate this instead of writing code manually. I'm not sure if it's possible with the setup I'm using, but any tips in the right direction would be great!

Thank you!

CodePudding user response：

Use a loop to create the HTML, so you can substitute the same number into both the <td> and $crim_url.

<?php
$numbers = ['0002', '0004'];
?>
    <tbody>
    <tr>
<?php
foreach ($numbers as $number) { 
    $crim_url = "<a href=../images/vinyl/crim/numbers/$number.jpg>Link</a>";
?>
    <td><? print $bluewhite ?></td><td class=num><?= $number ?></td><td>Name</td><td><?= $crim_url ?></td></tr><tr>
<? php
} ?>
    </tr>
    </tbody>

CodePudding user response：

Because you tagged Javascript in your question, here is a pure JS solution for you.

If you already have the table rows parsed in the DOM within the table, you can loop over the elements and get the textContent of each element and then find its closest parent element and query the target tr element that will hold the formatted link and then set its innerHTML to the formatted link. Format the link using a method that returns the textContent of the current iteration of the num element.

// function to return the link formatted with the proper address
// maybe you want to add more attributes like a class or a dataset
function parseLink(address, className) {
  return `<a  href=../images/vinyl/crim/numbers/${address}.jpg>Link - ${address}</a>`
}

// get all elements with a class of num
const nums = document.querySelectorAll('.num')

// loop over the elements with a class of num
nums.forEach(num => {
  // get the closest parent row and query the 4th child to display the link
  let val = num.closest('tr').querySelectorAll('td')[3]
  // set the innerHTML of that 4th child to the formatted link
  val.innerHTML = parseLink(num.textContent, 'blue-white link')
})

.blue-white:hover {
  color: white;
  background: blue;
}

.link {
  text-decoration: none;
}

<table>
  <tbody>
    <tr>
      <td>
        <? print $bluewhite ?>
      </td>
      <td class='num'>0002</td>
      <td>Name</td>
      <td>
      </td>
    </tr>
    <tr>
      <td>
        <? print $bluewhite ?>
      </td>
      <td class='num'>0004</td>
      <td>Name</td>
      <td>
      </td>
    </tr>
  </tbody>
</table>