양식에 입력 및 렌더링 된 요소 추가하기

폼 태그 내에 중첩 된 테이블에 요소가 깔끔하게 형식화 된 양식이 있고 새로운 입력으로 해당 테이블에 다른 행을 추가하고 싶습니다. 새 입력을 양식 요소 (document.forms.formName에 있고 양식과 함께 제출할 수 있도록)와 새 행의 셀 (행 내부에 렌더링되도록)에 모두 추가하려면 어떻게해야합니까?양식에 입력 및 렌더링 된 요소 추가하기

셀과 양식 요소에서 appendChild 메소드를 호출하면 둘 다 일종의 이중 멤버십을 제공하는 대신 호출 된 마지막 요소에 추가됩니다. 요소가 렌더링되는 방식을 방해하지 않는 형식에서 호출 할 수있는 일종의 추가가 있습니까?

편집 : Woops, 테이블 안쪽에 중첩 된 양식을 가져야합니다. 그 반대도 마찬가지입니다. Firefox 3.6에서는 작동하지 않지만 Internet Explorer 8에서는 작동합니다.

출처

2011-08-02 Sixtyten

편의상, 브라우저마다 '테이블'조작을 다르게 처리하므로 jQuery를 제안합니다. (그리고, 물론 레이아웃을 위해서'table'을 사용하지 않는 것을 고려하십시오.) 그리고'form'이'table'을 캡슐화한다면'table'에 새로운 행을 추가하면됩니다. '. –

아, 사실 나는 테이블 안쪽에 양식을 중첩 시켰습니다. 빠른 테스트 결과 입력이 Firefox 3.6 (IE8이 아님) 아래 양식에 등록되지 못하게됩니다. 그것이 내 오래된 코드를 더 자세히 살펴 보지 못한 것에 대한 것입니다. – Sixtyten

예. 나는'FORM' 태그가'TABLE'에 어떻게 있었는지 추측하지는 않을 것입니다. 그러나 여러분이 여러 행을 가지고 있다면, 폼과 테이블의 브라우저의 단점 모드 렌더링에 달려 있습니다. –

기존 테이블 행의 복사본을 원한다면 전체 행을 복제하고 테이블에 추가하기 만하면됩니다. 표가 양식에 있으면 입력이 자동으로 양식에 추가됩니다.

예제이다 : 당신은 아마 입력의 이름과 값을 업데이트하고 정리하는 다른 작업을 수행해야합니다

<form ...> 
    <table> 
    <tr><td><input name="foo"> 
    </table> 
</form> 

<button onclick=" 
    var table = document.getElementsByTagName('table')[0]; 
    var tBody = table.tBodies[0] 
    var newRow = tBody.rows[0].cloneNode(true); 
    tBody.appendChild(newRow); 
">Add a row</button>

참고 위는 전략을 보여줍니다.

출처

2011-08-02 00:35:52 RobG

양식에 입력 및 렌더링 된 요소 추가하기

답변

관련 문제