CI 묻고 답하기

제목 자바스크립트에서 상하위 노드값 읽기 질문입니다.
글쓴이 liekie 작성시각 2010/12/29 18:39:31
댓글 : 7 추천 : 0 스크랩 : 0 조회수 : 27444   RSS

안녕하세요.

CI와 상관은 없지만... 쇼핑몰 제작중에 문제에 부딪혀서 질문드립니다.

자바스크립트 에서 현재 클릭한 <TD>의 상하위<TD>의 <input> value를 읽으려면 어떻게 해야하나요?

<table>

      <tr>
         <td>
                <input type="hidden" name="car" value="자동차">
                        <span id="100000"> 
                                <a href="#none;">자동차</a>
                        </span>

                  <table>
                       <tr>
                          <td>
                               <input type="hidden" name="tire" value="타이어">
                                   <span id="200000"> 
                                        <a href="#none;">타이어</a>
                                   </span>
                         </td> 
                 </tr>
                 <tr>
                    <td>
                          <input type="hidden" name="handle" value="핸들">
                                   <span id="300000"> 
                                        <a href="#none;">핸들</a>
                                   </span>
                   </td>
                </tr>
              </table>

         </td>
      </tr>

      <tr>
         <td>
                <input type="hidden" name="air" value="비행기">
                        <span id="400000"> 
                                <a href="#none;">비행기</a>
                        </span>
         </td>
      </tr>

      <tr>
         <td>
                 <input type="hidden" name="heli" value="헬기">         
                        <span id="500000"> 
                                <a href="#none;">헬기</a>
                        </span>
         </td>
      </tr>

</table>

1) 자동차를 클릭시 비행기
2) 비행기를 클릭시 자동차
3) 타이어를 클릭시 핸들
4) 핸들을 클릭시 타이어

의 값을 읽으려면 어떻게 해야하나요 -_-;;


 
 <input type="hidden" name="tire" value="타이어"><a href="#none" onclick="alert('타이어:'+this.parentNode.childNodes(0).value);">타이어</a>
 

 이렇게 하면 <input type="hidden" name="tire" value="타이어"> 의 값은 읽을수 있는데...
 상하위 TD의 <input>값은 인터넷을 찾아도 도무지 모르겠습니다. -_-;;

 답변 부탁드립니다.


 아울러 참고할 문서도 있으면 알려주심 감사하겠습니다.

 
 다음글 $config['database'] 이것을 문자열로 ... (2)
 이전글 url관련 질문입니다. (2)
목록

댓글

오징어 / 2010/12/29 21:55:33 / 추천 0
이해를 잘 못하겠어요
다중셀렉트 말씀하시는 건가요.........?
input 아이디 속성 넣으시고,
아이디.value 하시면될꺼 같네요......
이해하기 어려워요...
liekie / 2010/12/29 23:00:24 / 추천 0

<카테고리 구조> 가 아래와 같을때....
현재 클릭한 같은 레벨의 위,아래 값을 읽고 싶은것입니다.

비행기(Level1)의 [↑]를 클릭하면 같은 레벨인 상위 자동차(Level1)의 <input >값 을
비행기(Level1)의  [↓] 를 클릭하면 같은 레벨인 하위 헬기(Level1)의 <input >값 을
알고 싶은 것입니다.
dom구조의 "parentNode, childNodes"등을 활용하면 쉽게 구할수 있겠는데...
어떻게 하는지를 모르겟어요-_-;;


 자동차(Level1) [↑] [↓] 
  └타이어 [↑] [↓]
  └핸들[↑] [↓]
  └엔진[↑] [↓]
비행기(Level1) [↑] [↓]
헬기 (Level1) [↑] [↓]

위아래 값을 동시에 읽는건 아니구요...

document.getElementById('heli').value;
카테고리가 화면에 동적으로 생성되기 때문에 이렇게 읽는건아니구요.. 
 
 
SEB / 2010/12/30 06:50:27 / 추천 0
테이블 구조로 묶어놓으셔서 parentNode가 td / table 등으로 잡히기때문에 그렇습니다.

<table>
  <tr>
     <td>
        <input name="비행기"/>
      </td>
   </tr>
        <td>
           <input name="자동차"/>

인경우 비행기의 parentNode는 td가 됩니다.
자동차를 선택하시려면 비행기.parentNode.parentNode.parentNode.childNodes(1) .childnode(1).....이런식으로 접근하셔야 할듯하네요

디자인 node와 내용 node가 섞여있는경우엔 저런식으로 parentNode를 계산하기가 쉽지않고,,
테이블은 자체가 디자인적 요소이기때문에 가급적 사용을 안하시는것이 좋습니다.

아 그리고 참고로 javascript에서 parent/child Selector를 사용하실경우 id,name을 사용하실때보다 훨씬 속도가 느리다고합니다.
liekie / 2010/12/30 16:08:51 / 추천 0
SEB 님 말씀대로 하니까 되긴하는데....
정말 parentNode를 계산하는게 쉽지 않군요 -_-;;

다른 방법으로 구현하는 방법은 없을까요 ^^;;

감이 안오네요 -_-;;
eray / 2011/01/03 02:03:34 / 추천 0
테이블을 사용하지 마시고 Div, span과 CSS를 사용해서 만드시면 
컨텐츠가 의미위주로 정리가 되기때문에 조금 더 쉽지 않을까싶네요..

아니면.. 아예 동적으로 생성하실때, id나 class에 nodeLevel등을 지정하시어
javascript에서는 id셀렉터만을 사용해서도 구현가능하지 않을까요?

예를들면,  
<input name="비행기" id="1"/> 
<input name="자동차" id="2"/> 
<input name="타이어" id="2-1"/> 
<input name="핸들" id="2-2"/> 

모 이런식으로 말이죠..
liekie / 2011/01/03 02:52:29 / 추천 0
감사합니다..
이래 저래... 몇일 동안 강아지고생-_-;; 해서 잘 처리 되었습니다.

카테고리 관리는 처음 해보았는데...
쉽지 않군요.
써보지 않았던 스크립트써가면서 하다 보니 어렵게 느껴졌던것 같습니다.

카테고리 위아래로 움직일때마다 처리하는게 생각보다 꾀 까다롭네요...
위의 답변들을 시작으로 몇일간의 카테고리 관련 코딩이 잘마무리 되었습니다.... ^^;

감사합니다^^
void / 2011/02/07 18:11:41 / 추천 0
<script>
function traceParent( obj , nodeName ) { return(!obj||!obj.tagName)?null:(( obj.tagName.toUpperCase() == nodeName.toUpperCase() )?obj:traceParent(obj.parentNode,nodeName)); }
function getChildNodeWithType( node , index , type ) {
if( ! node ) { return false ; }
if( ! type ) { type = 1 ; }
if( ! index ) { index = 0 ; }
var rtn = null ;
var i = 0 ;
var ls = node.childNodes ;
for( var j = 0 ; j < ls.length ; ++j ) {
if( ls[j].nodeType == type ) { if( i == index ) { rtn = ls[j] ; break ; } ; i++ ; }
}
return rtn ;
}
</script>
<table>
<tbody>
<tr><td>a</td></tr>
<tr><td onclick='alert(getChildNodeWithType(traceParent(this,"TBODY"),0).innerHTML)'>b</td></tr>
</tbody>
</table>

뭐 이런식이라면.. 될거 같기도 한데요..

사족을 달자면...
익스플로러는 태그와 태그 사이의 공백문자들을 노드로 취급하지 않지만,
크롬이나 여타 브라우저들은 공백문자조차 문자열노드로 인식하는 관계로
anyNode.childNodes[0] 했을때 리턴되는 노드가 다를 수 있습니다.

뒷북인감... ...