How can I strikethrough text in different elements in an HTML table row using JavaScript most efficiently?

Question

My question is whether I can structure my HTML/JS to require less hardcoding in of ids. (this is what I had in mind by "efficiently").

As of now, I have a <table> with many <tr> table rows. Within each row are two cells( <td> table data elements). The first cell contains a checkbox, and an anchor link. The second <td> cell is just a text description of the link. They look like this:

<tr>
  <td class="codecol">
      <input type="checkbox">
      <a title="I&amp;C SCI 33" onclick="return showCourse(this, 'I&amp;C SCI 33');">I&amp;C SCI 33</a>
  </td>
  <td>Intermediate Programming</td>
</tr>

However, I want to strike through the link and text description if the checkbox is checked (and unstrike if unchecked). So I wrote a JS function as follows:

function checkStrikethrough(checkboxElemnt, rowData) {
    //strikethrough text if checked
    if (checkboxElemnt.checked) {
        for(var i = 0; i < rowData.length ; i++) {
            var elemnt = document.getElementById(rowData[i]);
            elemnt.style.setProperty("text-decoration", "line-through");
        }
    }
    // normal text if not checked
    else {
        for(var i = 0; i < rowData.length ; i++) {
            var elemnt = document.getElementById(rowData[i]);
            elemnt.style.setProperty("text-decoration", "none");
        }
    }
}

The problem I'm having with this is hardcoding in changes in the HTML file: the id's to pass as parameters. There's just so many rows that I began to wonder if there was a better way than modifying like this:

<tr>
  <td class="codecol">
      <input type="checkbox" onchange='checkStrikethrough(this, ["icsci33Link", "icsci33Td"]);'>
      <a id="icsci33Link" title="I&amp;C SCI 33" onclick="return showCourse(this, 'I&amp;C SCI 33');">I&amp;C SCI 33</a>
  </td>
  <td id="icsci33Td">Intermediate Programming</td>
</tr>

<tr>
  <td class="codecol">
      <input type="checkbox" onchange='checkStrikethrough(this, ["icsci45cLink", "icsci45cTd"]);'>
      <a id="icsci45cLink" title="I&amp;C SCI 45C" onclick="return showCourse(this, 'I&amp;C SCI 45C');">I&amp;C SCI 45C</a>
  </td>
  <td id="icsci45cTd">Programming in C/C++ as a Second Language</td>
</tr>

So, I am wondering -- is there some way to implement this that would require the least amount of effort to change the HTML? Ideally, is there a solution that would require only one or two uses of a "find-and-replace" in a text editor to change all the HTML?

Answer 1

Yes, you can do it with some simple DOM traversing.

Markup

<input type="checkbox" onchange="checkStrikethrough(this)">

JS

function checkStrikethrough(element) {

  var elementToDelete = element.parentElement.nextElementSibling; // traversing the DOM, moving up to parent td, then on to next sibling td

  element.checked ? elementToDelete.style.color = 'red': elementToDelete.style.color = 'black';

}

Please keep in mind that this solution requires your HTML structure to remain constant through all iterations of the table rows. Also, I'm just changing the font color in JS: you can style as you wish, now that you know how to target the element.