onchange를 사용하여 여러 테이블 행을 표시하거나 사라지게하는 방법

Question

사용자가 yes라고 대답하면 나눗셈 영역을 표시하는 옵션이 있습니다.

그러나 레이아웃을 변경했으며 양식에서 통계 데이터를 처리했기 때문에 일부 부품에 대해 일부 테이블을 사용할 것이라고 생각했습니다.

그래서 나는 onchange 함수를 사용하여 테이블에 3 개의 테이블 행을 추가하는 방법을 궁금합니다.

그러나 getelementbyID는 하나의 요소에서만 작동하므로 내 행 하나만 표시됩니다.

<table> 
     <tr> 
     <th> 
    <select name="dosage" id="dosage" style="display:block;" onchange="document.getElementById('dosagearea').style.display = this.options.selectedIndex ? 'block' : 'none'"> 
    </th> 
    </tr> 


    <?php 
//this code generates input fields using codeigntier 
           echo '<tr id="dosagearea">', '<td>', form_label('Emitted µmGy','dosage_emitted'), '</td>', '<td>', form_input ('dosage_emitted', set_value('dosage_emitted')) ,'</td>', '</tr>'; 
           echo '<tr id="dosagearea">', '<td>', form_label('Absorbed mGy2','dosage_absorbed'), '</td>', '<td>', form_input ('dosage_absorbed', set_value('dosage_absorbed')) ,'</td>', '</tr>'; 
           echo '<tr id="dosagearea">', '<td>', form_label('Dosage Period (mins)','dosage_time'), '</td>', '<td>', form_input ('dosage_time', set_value('dosage_period')), '</td>', '</tr>'; 
         ?> 

    </table> 

어떤 제안 : 여기

내가 지금까지 가지고있는 코드는?

감사

Answer 1

당신이 정말로 그는 같은 ID로 여러 요소를 (ID가 고유해야합니다)하고 싶지 않아요. 대신 클래스를 사용할 수 있습니다. 내 전문 기술은 jquery를 사용하여이를 쉽게 만들 수 있지만 사용할 수있는 "getelementbyclass"동작을 구현하는 함수가 있습니다.

Answer 2

getElementById를 사용하지 마십시오. 여러 요소가 동일한 클래스 이름을 가질 수 있으므로 getElementById를 사용하십시오. 그리고 그것은 IE에서 작동하는지 확인하려면 다음을 추가합니다

document.getElementsByClassName = function(class_name) 
{ 
    var all = this.getElementsByTagName('*'); 
    var matchArray = new Array(); 
    var re = new RegExp("(?:^|\\s)" + class_name + "(?:\\s|$)"); 
    for (var i = 0, l = all.length; i < l; i++) 
    { 
     if (re.test(all[i].className)) 
      matchArray.push(all[i]); 
    } 
    return matchArray; 
} 

Answer 3

<select name="dosage" id="dosage" style="display:block;" onchange="toggleShowHide(this.options.selectedIndex, ['id1', 'id2', 'id3']);"> 

<script type="text/javascript"> 
function toggleShowHide(idx, arrIDs) { 
    var display = idx ? 'block' : 'none'; 
    for(var x=0; x<arrIDs.length; x++) 
     document.getElementById(arrIDs[x]).style.display = display; 
} 
</script>