2014-04-11 6 views
0

페이지에 여러 입력 값을 가져 오려고합니다. 입력의 ID는 동적으로 생성됩니다.ID가 변경되는 요소 값 가져 오기

<input id="updates_662224305" class="text quantity" type="text" value="1" name="updates[662224305]" size="4"> 

입력이 들어있는 표와 셀에 대한 루프가 실행 중입니다. 나는 자신의 ID를 추출하고 변수에 넣어 수 있었다으로,

var racetamarray = [], 
racetamtotal = 0, 
table = document.getElementById('cart-table'), 
cells = table.getElementsByTagName('td'); 

for (var i=0,len=cells.length; i<len; i++){ 

    if(cells[i].innerHTML.indexOf("ncombo-racetam") != -1) { 
     i+=3; 
     var racetaminput = cells[i].innerHTML; 
     var racetaminputcontain = racetaminput.slice(43,60); 
     var racetamelem = document.getElementById(racetaminputid); 
     racetamarray.push(parseInt(racetamelem.value)); 
    } 
} 

이 파이어 폭스에서 근무 : I는 입력이에있는 세포의 innerHTML을 받고, 다음 자신의 식별자가있는 부분을 슬라이스 한 racetamelem. 그러나 크롬에서 그것을 시도 할 때 작동하지 않습니다, 슬라이스는 문자열의 다른 부분에서 발생하고 해당 ID를 캡처하지 않습니다. 이것을 조각 내거나 문자열에서 입력을 DOM 요소로 변환하는 더 좋은 방법이 있습니까? 테이블의 행 중 하나

HTML :

<tr class="item sampler-pramiracetam-capsules"> 
<td> 
<span class="ncombo-racetam"></span> 
<a href="/products/sampler-pramiracetam-capsules"> 
<img src="//cdn.shopify.com/s/files/1/0173/1766/products/PramiracetamCaps_grande_thumb.jpg?v=1396441752" alt="Sampler, Pramiracetam Capsules" /> 
</a> 
</td> 
<td> 
<a href="/products/sampler-pramiracetam-capsules">Sampler, Pramiracetam Capsules - 30 Capsules</a></td> 
<td>$8.90</td> 
<td><input class="text quantity" type="text" size="4" id="updates_658967781" name="updates[658967781]" value="1" class="replace" /></td> 
<td>$8.90</td> 
<td><a class="btn remove-from-cart" href="/cart/change?id=658967781&quantity=0">Remove</a></td> 
</tr> 
+0

언제든지 jsfiddle에 넣을 수 있습니까? – Pete

+3

NodeList에 모든 입력을 가져 오려면 왜'inputs = table.getElementsByTagName ('input')'을하지 않습니까? – MrCode

+0

MrCode와 동의하십시오. 브라우저 지원 요구 사항에 따라'table.querySelectorAll ('input')' – Jack

답변

1

이 클래스 이름을 가진 첫 번째 셀에서의 요소 테이블 행 및 검사를 통해 안내하고, 알게되면 그 입력 값을 푸시 (네 번째 셀에서) 배열로.

데모 : http://jsfiddle.net/SEaE4/

var racetamarray = []; 
var table = document.getElementById('cart-table'); 
var row; 

for(var i=0; i<table.rows.length; i++){ 
    row = table.rows[i]; 
    if(row.cells.length > 3){ 
     if(row.cells[0].querySelectorAll('.ncombo-racetam').length) { 
      racetamarray.push(row.cells[3].getElementsByTagName('input')[0].value); 
     } 
    } 
} 

console.log(racetamarray); 

사이드 참고 : IE7 이상을 지원해야하는 경우 다음 클래스에 대한 각 요소를 확인하기 위해 더 많은 코드로 querySelectorAll() 전화를 교체해야합니다.

+0

신난다, 고마워! –

관련 문제