JavaScript를 가장 효율적으로 사용하여 HTML 테이블 행의 다른 요소에서 텍스트를 취소 할 수 있습니까?

Question

제 질문은 ID의 하드 코딩이 덜 필요하도록 HTML/JS를 구조화 할 수 있는지 여부입니다. (이것은 내가 "효율적으로"염두에 두었던 것입니다).

현재로서는 <table>에 많은 <tr> 개의 테이블 행이 있습니다. 각 행에는 두 개의 셀 (<td> 테이블 데이터 요소)이 있습니다. 첫 번째 셀에는 확인란과 앵커 링크가 있습니다. 두 번째 <td> 셀은 링크의 텍스트 설명 일뿐입니다. 그들은 다음과 같이 :

<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> 

는 그러나, 나는이 확인란이 선택 (및 선택하지 않은 경우 unstrike) 경우 링크 및 텍스트 설명을 통해 공격 할. 나는이와 데 문제는 HTML 파일의 변화에 ​​하드 코딩되어

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"); 
     } 
    } 
} 

: 다음과 같이 그래서 나는 JS 기능을 쓴 아이디의 매개 변수로 전달합니다. 최소한의 노력을 필요로이를 구현하는 몇 가지 방법이 있습니다 - 그래서

<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> 

, 내가 궁금 :이 같은 수정하는 것보다 더 좋은 방법이 있다면 궁금해하기 시작 너무 많은 행이있다 HTML을 바꾸려면? 이상적으로 텍스트 편집기에서 "찾기 및 바꾸기"를 한 두 가지만 사용하면 모든 HTML을 변경할 수있는 솔루션이 있습니까?

Answer 1

네, 간단한 DOM 트래버 싱으로 할 수 있습니다.

마크 업

<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'; 

} 

이 솔루션은 테이블 행의 모든 ​​반복을 통해 일정하게 유지하기 위해 HTML 구조를 필요로한다는 점에 유의하시기 바랍니다. 또한 JS에서 글꼴 색상을 변경하는 중입니다. 요소를 대상으로 지정하는 방법을 알았으므로 원하는대로 스타일을 지정할 수 있습니다.