테이블 안에 양식

239

새 행을 추가하고 현재 행을 업데이트하기 위해 HTML 테이블에 일부 양식을 포함시킵니다. 내가 얻는 문제는 dev 도구에서 양식을 검사 할 때 양식 요소가 열린 직후 닫힙니다 (입력 등이 양식에 포함되지 않음).

따라서 양식을 제출하면 필드가 포함되지 않습니다.

테이블 행과 입력은 다음과 같습니다.

<tr>
    <form method="post" action="">
        <td>
            <input type="text" name="job_num">
        </td>

        <td>
            <input type="text" name="desc">
        </td>
    </form>
</tr>

어떤 도움이라도 좋을 것입니다, 감사합니다.

— 알렉스
소스

<form>안에 넣을 수 없습니다 <tr>.

— Derek 朕會功夫

그리고 당신은 폐쇄하는 것을 잊었다 <tr>.

— Derek 朕會功夫

폼에 display : table-row를 사용하고 테이블 태그를 모두 버립니다. 내 답변보기 here : stackoverflow.com/a/15600151/1038812

— Matthew

그것은 할 수 없지만 작동합니다 ...

— Sandburg

답변:

370

양식이되어 허용되지 의 하위 요소로 table, tbody또는 tr. 하나를 넣으려고하면 브라우저가 테이블 뒤에 나타나는 형식으로 이동하는 경향이 있습니다 (테이블 행, 테이블 셀, 입력 등의 내용은 그대로 두십시오 ).

양식 안에 전체 테이블이있을 수 있습니다. 테이블 셀 안에 양식을 가질 수 있습니다. 양식 안에 테이블의 일부를 가질 수 없습니다.

전체 테이블 주위에 하나의 양식을 사용하십시오. 그런 다음 클릭 한 제출 단추를 사용하여 처리 할 (빠른) 행을 결정하거나 모든 행을 처리 (대량 업데이트 허용)하십시오.

HTML 5는 form 속성을 소개 합니다 . 이를 통해 테이블 외부의 행당 하나의 양식을 제공 한 다음 주어진 행의 모든 양식 제어를 해당 양식을 사용하여 해당 양식 중 하나와 연관시킬 수 id있습니다.

— 쿠엔틴
소스

전체 테이블에 대해 하나의 양식을 사용하십시오. 모든 필드는 비어 있어도 서버로 전송됩니다. 엄청난 양의 데이터가 될 수 있습니다 !!! 대량 / 공용으로 사용하려면 해당 행의 단추에서 열린 대화 상자 (표가 아닌 양식)를 사용하십시오.

— Loenix

@Loenix : 사람들의 대역폭에 최소한의 부담을 주도록 충분한 데이터를 테이블에 넣을 가능성은 거의 없습니다 (적어도 일반적인 웹 페이지의 크기와 비교할 때). 사용자가 행을 편집하도록 선택하고 변경을 수행 할 수있게하는 것 사이에 다른 페이지를로드하도록 요구하면 OTOH는 수행해야 할 성가신 추가 상호 작용이 될 것입니다.

— Quentin

원래 질문에서 제안한 솔루션에 대한 편집 버튼이 필요하지 않습니다.

— Quentin

표준 <form>내 에서 금지 된 이유는 무엇 <table>입니까?

— 1234ru

@Qentin 공정합니다. 20 년이 지난 지금도 분명한 이유가없는 것은 유감입니다.

— 1234ru

188

마크 업을 저장 하려면 "form"속성 을 사용하십시오.

<form method="GET" id="my_form"></form>

<table>
    <tr>
        <td>
            <input type="text" name="company" form="my_form" />
            <button type="button" form="my_form">ok</button>
        </td>
    </tr>
</table>

(* <form> 태그 외부의 양식 필드)

처음 2 개의 댓글보기

— 블라디미르
소스

이 솔루션은 HTML5에서만 유효합니다.

— threenplusone 2019

또한, 그것은하지 않습니다 탐색기 인터넷 작업 추가 정보를 원하시면 여기

— Souhaieb 베스 베스

폼 속성의 상태는 매우 인내심을 의미 '고려'입니다 developer.microsoft.com/en-us/microsoft-edge/platform/status/...을 한편이 polyfill을 시도하고 당신을 위해 작동하는지 볼 수 있습니다 stackoverflow.com/a/26696165/648484

— Souhaieb Besbes

"개발 중"으로

— 보이며

@ user1156544 현재 Edge에서는 지원되지만 IE는 지원하지 않습니다. IE를 전혀 지원해야하는 경우이 솔루션을 사용하지 않아도됩니다. 내 계획은 두 개의 양식 요소에 두 개의 테이블을 사용하는 것입니다 (이 작업을 수행해야한다고 믿을 수는 없습니다). 감사합니다 Microsoft!

— 명왕성

: 당신은 "편집 가능한 그리드"즉, 폼 행 중 하나를 만들 수 있습니다 구조와 같은 테이블, CSS를 사용하는 모방 TABLE 태그의 레이아웃을 원하는 경우 display:table, display:table-row등을 display:table-cell.

전체 테이블을 양식으로 랩핑 할 필요가없고 테이블의 각 명백한 행에 대해 별도의 양식과 테이블을 작성할 필요가 없습니다.

대신 이것을 시도하십시오 :

<style>
DIV.table 
{
    display:table;
}
FORM.tr, DIV.tr
{
    display:table-row;
}
SPAN.td
{
    display:table-cell;
}
</style>
...
<div class="table">
    <form class="tr" method="post" action="blah.html">
        <span class="td"><input type="text"/></span>
        <span class="td"><input type="text"/></span>
    </form>
    <div class="tr">
        <span class="td">(cell data)</span>
        <span class="td">(cell data)</span>
    </div>
    ...
</div>

전체 TABLE을 FORM으로 줄 바꿈하는 문제는 제출할 때 모든 양식 요소가 전송된다는 것입니다 (원할 수도 있지만 아닐 수도 있음). 이 방법을 사용하면 각 "행"에 대한 양식을 정의하고 제출시 해당 데이터 행만 보낼 수 있습니다.

TR 태그 (또는 FORM 주위의 TR) 주위에 FORM 태그를 배치하는 문제는 HTML이 잘못되었다는 것입니다. FORM은 여전히 평소와 같이 제출을 허용하지만이 시점에서 DOM이 손상되었습니다. 참고 : JavaScript로 FORM 또는 TR의 하위 요소를 가져 오면 예기치 않은 결과가 발생할 수 있습니다.

IE7은 이러한 CSS 테이블 스타일을 지원하지 않으며 IE8은이를 "표준"모드로 가져 오기 위해 doctype 선언이 필요합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

display : table, display : table-row 및 display : table-cell을 지원하는 다른 브라우저는 TABLE, TR 및 TD 태그를 사용하는 경우와 동일한 CSS 데이터 테이블을 표시해야합니다. 대부분은 그렇습니다.

행 그룹을 display: table-header-group, table-row-group및로 table-footer-group각각 다른 DIV에 래핑하여 THEAD, TBODY, TFOOT를 모방 할 수도 있습니다.

참고 : 이 방법으로 수행 할 수없는 것은 colspan입니다.

이 그림을 확인하십시오 : http://jsfiddle.net/ZRQPP/

— 매튜
소스

이것을 언급 한 것에 대한 +1은 colspan을 가능하게하지 않는다. 나는 그것을 통해 그것을 처음 읽는 것을 놓 쳤어 야했다 ;-)

— Johannes Rudolph

초록색으로 확인 된 답변이어야합니다 (실제 테이블 태그를 사용하지 않더라도)

— Alessio