Javascript table(id) 안의 해당 name 의 value 찾기

Javascript table(id) 안의 해당 name 의 value 찾기

작성일 2016.05.31댓글 2건
    게시물 수정 , 삭제는 로그인 필요

Javascript 고수님들 조언을 구합니다.

<table id="tbl1"><tr><td><input type="text" name="txt" value="abc" /><td></tr></table>
<table id="tbl2"><tr><td><div><input type="text" name="txt" value="def" /></div><td></tr></table>
<table id="tbl3"><tr><td><div><table><tr><td><input type="text" name="txt" value="ghi" /></td></tr></table></div><td></tr></table>

위에서 

document.getElementsByName("txt")[2] 하는 방법 말고,
id="tbl3" 에 있는 name="txt" 값을 구하고 싶습니다.

이렇게 질문하는 이유는 이전 IE 에서 document.all["tbl1"].all["txt"] 방식으로 사용하던 것을
표준으로 바꾸면서 어떻게 해야 하고 있습니다.

document.getElementById("tbl1").children 혹은 childNodes 로 접근할 경우 <tr> 을 가져오기 때문에
여러 단계를 걸쳐서 찾아야 하는데 child 에 child 에 child 를 매번 접근하기도 그렇고
방법이 없을까요?


#javascript table id #javascript get table by id #javascript get table row id #javascript set table id #javascript get table cell id #javascript get table row id onclick #javascript create table with id #javascript hide table by id #javascript delete table by id #javascript get table without id

profile_image 익명 작성일 -

<script>
var txt = document.getElementById("tbl3").querySelector('[name="txt"]');
console.log(txt.value); // ghi
</script>


또는


<script>
var txt = document.getElementById("tbl3").getElementsByTagName('input').item(0);
console.log(txt.value); // ghi
</script>

profile_image 익명 작성일 -

querySelector 나 querySelectorAll 을 사용해보세요.
querySelector는 처음 찾은 것 하나를, querySelectorAll 은 찾은 것들을 배열로 반환합니다.


http://www.w3schools.com/jsref/met_document_queryselector.asp


따라서 document.getElementById("tbl1") 하위에서 사용하고자 한다면


document.getElementById('tbl3').querySelector('[name="txt"]');
document.getElementById('tbl3').querySelectorAll('[name="txt"]')[0];


객체는 이렇게 접근하시면 됩니다.

아랜 초간단 예제


<table id="tbl1"><tr><td><input type="text" name="txt" value="abc" /><td></tr></table>
<table id="tbl2"><tr><td><div><input type="text" name="txt" value="def" /></div><td></tr></table>
<table id="tbl3"><tr><td><div><table><tr><td><input type="text" name="txt" value="ghi" /></td></tr></table></div><td></tr></table>


<script type="text/javascript">
window.onload = function() {
    var val = document.getElementById('tbl3').querySelector('[name="txt"]').value;
    //var val = document.getElementById('tbl3').querySelectorAll('[name="txt"]')[0].value;
    alert(val);
}
</script>


javascript id찾기

... getElementById() 를 많이 쓰는데요, 이렇게 찾으면 문서 전체에서 해당 Id를... + table id = 'table1' tr td id = 'a' td id = 'b' 라는 구조가 있을때(tr은 id가 없음) td id...

javascript id 저장

... 안하고 id값 저장하는게 가능한가요??... localStorage.setItem(key,fm.val.value); } function... javascript 를 통해서 해당 브라우져의 SQL 을...

javascript 로 name이 하나인...

... %> <INPUT class=ckbox onfocus=this.blur() type=checkbox value='W:<%=avo.getAuth_id()%>' name=W_auth <% if(mode.equals("mod")) out.println("disabled"); if(mode.equals("view...

javascript 초보 질문 있습니다..

... Test ID : PW : NAME : Email : 회원정보찾기 자바스크립트... getElementById('userID').value; var b = document.getElementById('userPW').value;...

[JavaScript] value가 없는 input...

... $(':input.tbox2[value=""]').first().remove(); }); }... table").append(""); } else { } save_item(); }); }); })(jQuery) Portfoilo Profile Results First Name...