[JavaScript/JQuery] 테이블 이벤트 발생 시 같은 행의 요소 선택되게 하기(parent, siblings, children)

[JavaScript/JQuery]

<td>에서 이벤트 발생 시

같은 행(<tr>)의 다른 열(<td>) 다루기, 변경하기(parent, siblings, children)

 

 

 

 

 

테이블 내에서 한 <td> 요소를 CLICK, 혹은 CHANGE 해서 이벤트를 발생시켰을때

같은 <tr> 속 다른 <td> 자식 요소의 변화를 만들고 싶다면,

제이쿼리의 parent, siblings, children 함수를 사용할 수 있다.

 

(ex)

<table>
	<tr>
    	<td id="tdselect">
        	<select id="selectbox"> ... </select>
        </td>
       	<td id="tdtext">
        	<input type="text" id="textbox">
        </td>
    </tr>
</table>

 

 

 

(결과)

(tdselect 안의 selectbox)

(tdtext 안의 textbox)

 

이러한 상황일 때, select 의 값을 변경했을 때 그 값을 같은 <tr>라인의 다른 <td>인 input 에 넣고 싶다면

 

<select id="selectbox" onclick="함수명(this)"> 



function 함수명(arg){

      var str = arg.val();

      $(arg).parent().siblings('.tdtext').children().val(str);

}

 

이렇게 처리할 수 있다.

 

*설명*

 

.parent()는 나의 부모요소, 여기서는 <td>의 부모요소인 <tr>이 되는 것이고,

.siblings()는 나의 형제요소, 여기서는 tdselect가 될것이고

파라미터에 id나 name을 넣어 형제요소를 선택할 수 있다.

.children()은 자식요소, 이고, 여기서는 sibling('.tdtext')의 자식요소인 <td>속의 인풋박스가 된다.

 

 

열심히 찾아보고 한 건데 생각보다 너무 복잡한 것 같다..

더 쉬운 방법이 없을까싶다.