2011-10-03 5 views
1

자바 스크립트를 기반으로 생성되는 동적 양식이 있습니다. 여기에 관련 자바 스크립트는 다음과 같습니다특정 텍스트 영역을 삭제하는 방법은 무엇입니까?

function addRowToTable() 
{ 

    var tbl = document.getElementById('convention'); 
    var lastRow = tbl.rows.length; 
    // if there's no header row in the table, then iteration = lastRow + 1 
    var iteration = lastRow; 
    var row = tbl.insertRow(lastRow); 


// right cell 
    var cellRight = row.insertCell(0); 

    var el = document.createElement('textarea'); 
    el.rows = '2'; 
    el.cols = '80'; 
    el.name = 'conventionSkill' + iteration; 
    el.size = 40; 

    var el2 = document.createElement('input'); 
    el2.type = 'hidden'; 
    el2.name = 'conventioni_alt'; 
    el2.value = iteration; 
    el2.size = 40; 


    el.onkeypress = keyPressTest; 
    cellRight.appendChild(el); 
    cellRight.appendChild(el2); 


} 

function removeRowFromTable() 
{ 
    var tbl = document.getElementById('convention'); 
    var lastRow = tbl.rows.length; 
    if (lastRow > 2) tbl.deleteRow(lastRow - 1); 
} 

HTML : 단순히 새로운 텍스트 영역을 추가로

<table id="convention"> 
    <tr> 
     <td><label>Skill Descriptions:</label></td> 
    </tr> 

    <tr> 
     <td> 
     <textarea name='convention_54' rows='2' cols='80'> 
text 
</textarea></td> 

     <td><a href='javascript:void(0)' onclick='removeRowFromTable(54);'><font size= 
     '+1'>-</font></a></td> 
    </tr> 

    <tr> 
     <td> 
     <textarea name='convention_55' rows='2' cols='80'> 
text2 
</textarea></td> 

     <td><a href='javascript:void(0)' onclick='removeRowFromTable(55);'><font size= 
     '+1'>-</font></a></td> 

     <td><a href='javascript:void(0)' onclick='addRowToTable();'><font size= 
     '+1'>+</font></a></td> 
    </tr> 
    </table> 

내가 추가 기능을 좋아한다. 그러나 제거 단추는 양식 맨 아래에서 제거합니다. removeRowFromTable이 특정 텍스트 영역을 제거하도록 어떻게 만들 수 있습니까? 예를 들어, 양식의 마지막 텍스트가 아닌 중간에있는 텍스트 영역 중 하나를 삭제하려고합니다.

의견을 보내 주셔서 감사합니다.

답변

5

즉, 제거하려는 텍스트 영역을 정확히 찾아야합니다 (ID로).

그러나이 길을 수동으로 진행하는 ID 열거 형 및 DOM 조작 코드를 지나치기 전에 jQuery (http://jquery.com/)를 살펴볼 수 있습니다. jQuery는 셀렉터 메커니즘을 통해이 항목을 아주 쉽게 처리 할 수 ​​있으며이 DOM 조작을 모두 직접 수행하려고하면 많은 브라우저 간 골치 거리를 줄일 수 있습니다.

SO에 대한 jQuery에 대해 많은 질문을 찾을 수 있습니다. 예를 들어 얼마나 쉽게이 related- 및-간단한 테이블 조작 보는 것은 :

What is the best way to remove a table row with jQuery?

이럴 jQuery를 나와 내 팀을위한 엄청난 자바 스크립트 생산성 부스트이었다 학습 - 내 경험에 소요되는 시간도 가치 .

+0

제안 해 주셔서 감사합니다. 나는이 문제를 조사하고 있었지만 문제는 모든 텍스트 영역이 동적이라는 것입니다. 즉, 각각의 텍스트 영역이 완전히 다른 것입니다. 그래서 jquery 요소의 이름을 모르는 않고 행을 제거 할 수 없습니다 및 jquery 요소의 이름을 알 수없는 PHP 루프 내에 있습니다. 어떤 제안? : \ –

+1

신경 쓰지 마, 알아 냈어! :) –

관련 문제