선택 항목에서 여러 행을 강조 표시하거나 색상을 지정하는 방법은 무엇입니까?

Question

내 이전 질문과 관련이 있습니다.

How to change row color on selecting rows?

I 시작을 선택

<table border=1> 
    <tr id="id1"> 
     <td>3</td> 
     <td>row12</td> 
     <td>row13</td> 
    </tr> 
    <tr id="id2"> 
     <td>12</td> 
     <td>row22</td> 
     <td>row23</td> 
    </tr> 
    <tr id="id3"> 
     <td>15</td> 
     <td>row32</td> 
     <td>row33</td> 
    </tr> 
    <tr id="id4"> 
     <td>22</td> 
     <td>row42</td> 
     <td>row43</td> 
</tr> 
<tr id="id5"> 
     <td>23</td> 
     <td>row52</td> 
     <td>row53</td> 
</tr> 
<tr id="id6"> 
    <td>55</td> 
    <td>row62</td> 
    <td>row63</td> 
</tr> 
</table> 

양식을 따르며 값을 중지 각 행의 첫 번째 열 (값) 수치이다 하나 개의 테이블이이 시간. 텍스트 박스 값을 선택하는 시작 및 중지에

<form name="rcol" onsubmit="return false"> 
    Start value: <input type="value" name="start"><br> 
    End value: <input type="value" name="stop"><br> 
    <input type="submit" value="Submit"> 
</form> 

이 값은 그 첫번째 열/값의 시작에 놓여 있고 범위 정지 행만 착색 것이다 테이블 및 테이블로 전달된다. 어떻게 구현할 수 있습니까? 이 문제를 도와주세요.

Answer 1

자바 스크립트 :

function colorize() { 
    start_val = parseInt(document.getElementById('start').value); 
    stop_val = parseInt(document.getElementById('stop').value); 


    rows = document.getElementsByTagName("tr"); 

    for (i = 0; i < rows.length; i++) { 


     td = rows[i].getElementsByTagName("td")[0]; 

     values = td.innerHTML; 

     if (values >= start_val && values <= stop_val) { 

      td.parentNode.style.backgroundColor = 'red'; 

     } else { 

      td.parentNode.style.backgroundColor = 'white'; 
     } 




    } 
} 


document.getElementById("sub").addEventListener("click", colorize); 

HTML :

<form name="rcol" onsubmit="return false"> 
    Start value: <input type="value" name="start" id="start"><br> 
    End value: <input type="value" name="stop" id="stop"><br> 
    <input type="submit" value="Submit" id="sub"> 
</form> 

그래서, 기본적으로, TR 태그를 통해 루프, 첫 아이 숫자 값을 찾기 시작과 비교하고 값을 중지하고 그것 뿐이다. DEMO : http://jsfiddle.net/84932q9g/