페이지에 동적으로 표시되는 체크 박스의 ID를 얻는 방법

Question

나는 HTML 테이블이있는 JSP 페이지가 있습니다. 테이블의 내용은 xml 파일을 읽은 후 동적으로 채워지는 이 될 것입니다. xml 파일에있는 일부 데이터에 따라 테이블의 행 수가 2에서 10까지 다를 수 있습니다. 이제 html 테이블에 표시되는 각 행에 체크 박스이 있습니다. 체크 박스의 ID도 동적으로으로 지정됩니다. 자, 나는 표시되는 체크 박스의 모든 ID에 의존하는 자바 스크립트 코드를 작성해야한다. 테이블에 표시된 체크 상자의 모든 ID를 자바 스크립트 코드 에 동적으로 전달하는 방법?

PS :이 방법을 생각해보십시오. 잘못된 것이라면 저를 수정하십시오. 확인란의 ID를 보관할 빈 배열을 선언하십시오. for 루프를 사용하여 동적으로 테이블의 각 행을 만들 때 배열에 확인란의 ID를 추가합니다. 자,이 배열을 자바 스크립트에서 사용하려고 생각하고 있습니다.

자바 스크립트에서이 배열에 액세스 할 수 있습니까? 그렇다면이 배열을 자바 스크립트 블록에 어떻게 전달합니까? 이 자바 스크립트 코드를 jsp에 넣을 위치에 대한 제한이 있습니까 (예 : 확인란의 ID가 배열에 추가되는 코드 블록 전후). 나는 이런 종류의 물건에 비교적 새로운 있습니다. Pls는 모든 체크 박스 페이지로드를 사용할 수 있습니다 가정이 방법

Answer 1

두 가지 가능성이있는 것으로 알고 있다면. 당신은

1. 는 서버 측 for 루프의 모든 반복에 대해 자바 스크립트 배열에있는 확인란의 ID를 추가 할 수 있습니다. 따라서 페이지의 시작 부분에 빈 js 배열을 선언해야하며 각 체크 박스에 script 블록을 추가합니다. 여기서 id는 <yourarray>.push("<yourid>")으로 배열로 푸시됩니다. 당신이 볼 DOM ready (또는 온로드) 행사에서 다른

2. - 노력하고 기술적으로 (각 <script> 블록은 잠시 동안 렌더링 프로세스를 중지하고 여러 장소에서 코드를 "뿌리"때문에)하지만,이 솔루션은 정말 성능이 좋은하지 않습니다 DOM 컬렉션에서 ID를 가져 와서 배열에 푸시합니다.

   var ids = [], 
       cbx = document.querySelectorAll('input[type="checkbox"]'); 
   
   for (i = 0, l = cbx.length; i < l; i++) { 
        ids.push(cbx[i].id); 
   } 
   
   console.log(ids); 
   

바이올린 : http://jsfiddle.net/G44hH/1/ - 당신이 할 수있는 경우

Answer 2

를 구현하는 데 도움이, 당신이 (일반 자바 스크립트)을 수행 할 수 있습니다

var checks=[]; 
window.onload=function() { 
    var inputs = document.getElemementsByTagName("input"); 
    for (var i=0, n=inputs.name;i<n;i++) { 
    if (inputs[i].type=="checkbox") checks.push(inputs[i].id); 
    } 
} 

Answer 3

는 거래 정보 저장소 내부의 거래 정보 저장소가 #table ID로 테이블이 있다고 가정 TD에 체크 박스가 있습니다. 아래 JQuery와 그것을 할 수 있습니다

$('#table tr').each(function() { 
alert($(this).find('input:checkbox').attr('id')); 
}); 

그러나 나는 당신이 삭제 편집 등 같은 일을하는 특정 TD와 관련하여 확인란의 ID에 필요한 모든 체크 박스 ID를 저장할 필요가없는 것 같아요

내가 원하는 것을 명확하게 지정할 수 있다면 적절한 코드를 보낼 수 있습니다.

Answer 4

모든 checckboxes에 대한 클래스 속성을 추가 한 다음에 jQuery를 사용하여 사용이 솔루션 (그리고 첫 번째)하는 경우, 그것은 더 나은 물론 이 체크 박스를 클래스별로 선택하십시오.

jquery selector는 이러한 체크 박스의 배열을 반환 할 것이므로 필요에 따라이 배열을 사용할 수 있습니다. 이런 식으로. 당신이 그것에게 ID를 제공 한 경우 예 (

<input type=checkbox class ="box"/> 

var arr = []; 

arr = $(".box"); 

Answer 5

유사 mplungjan의 대답에 당신은 요소 유형을 검색 할 수 있습니다 다음 ID로 테이블에 대한 귀하의 경우 검색에 따라서

내에서 체크 박스 요소를 검색하기 위해 더 파고) 또는 tagname ('table'[0]이 첫 번째이자 유일한 테이블 인 경우) 테이블에서 checkbox 요소를 검색하고 각 배열을 각 테이블에 추가하십시오.

var table = document.getElementById('dataTable'); 
//OR if we assert there's only 1 table 
//var table = document.getElementsByTagName('table')[0]; 
var tableInputTags = table.getElementsByTagName("input"); 
var checkboxArray= []; 

for (var i=0; i<tableInputTags.length; i++) 
{ 
    if(tableInputTags[i].type=="checkbox") 
    { 
     checkboxArray.push(tableInputTags[i].id); 
    } 
} 
//continue doing something with the 
//array of dynamically created checkboxes...