find/ td:eq(0)/ not /closest/ toFixed 요소 찾기

find= 요소를 찾는다.

not=요소를 제외한다.

val=값을 넣거나 찾기

closest= 가장 가까운 요소를 찾기(해당 라인 또는 같은 라인에 있는 정보를 찾고 싶을때 사용한다.)

 

 

 

---

find("td:wq(0)") 

-0번째 <td>요소를 찾는다.

not("td:wq(0)") 

-0번째 <td>요소를 제외한다.

---

find("input")val("벨류추가");

-input태그의 value값을 "벨류추가"로 바꾼다.

---

.toFixed(1)

Number 인스턴스의 소수 부분 자릿수를 전달받은 값으로 고정한 후 , 그 값을 문자열로 반환한다.

-소수점 첫자리까지 나타낸다.

---

$('#parent li:last-child').closest('ul').find('li').length;

 

id가 parent인곳에서 마지막 li인 요소의  상위 ul을 찾아 ul안의li의 갯수를 구한다. 

 

---

 

 

---

EX.)

$(#trld1).find("td:eq(0)").find("input").val("ID추가);

-id 값이 "trd1"을 찾고 , 첫번째 <td>요소를 찾고 ,<input>태그의 value값을 "ID추가"로 바꾼다.

<tr id="trd1" class="trClass1">

<th>ID>

<td>

<input type="text" id="trinput1" value="" readonly="true">

</td>

<td>

<input type="button">

</td>

</tr>





<tr id="trd2" class="trClass2">

<th>ID>

<td>

<input type="text" id="trinput2" value="" readonly="true">

</td>

<td>

<input type="button">

</td>

</tr>

---

EX2.)

 td 의 두번째에 있는 텍스트를 수정하기

 

   <table>
        <tr>
            <td>1번</td>
            <td>노랭이</td>
            <td><button class='edit'>수정</button></td>
        </tr>
        <tr>
            <td>2번</td>
            <td>파랭이</td>
            <td><button class='edit'>수정</button></td>
        </tr>
        <tr>
            <td>3번</td>
            <td>초랭이</td>
            <td><button class='edit'>수정</button></td>
        </tr>
        <tr>
            <td>4번</td>
            <td>검둥이</td>
            <td><button class='edit'>수정</button></td>
        </tr>
    </table>

 

 

<script>
    $(function(){
        var _td,first_v;
        var btn = '<button class="edit">수정</button>'
    
        $(document).on('click','.edit',function(e){
        
            _td = $(this).closest('tr').find('td');
            
            // 취소시 리턴값
            first_v = _td[1].innerText; 
            
            var editform = "<input type='text' value='"+_td[1].innerText+"' size='10' />";
            var editbtn = "<button class='editDo'>완료</button>"+
                          "<button class='cancel'>취소</button>"+
                          "<button class='delDo'>삭제</button>";
                          
            $(_td[1]).html(editform);
            $(_td[2]).html(editbtn);
        })
        
        $(document).on('click','.editDo',function(){
            var el = $(_td[1]).find('input').val();
            $(_td[1]).text(el);
            $(_td[2]).html(btn);
        })
        
        $(document).on('click','.cancel',function(){
            $(_td[1]).text(first_v);
            $(_td[2]).html(btn);
        })
        
        $(document).on('click','.delDo',function(){
            $(_td).remove();
        })
    })
</script>