HTML : 유효한 XHTML 방식으로 각 TABLE ROW에 FORM 태그를 가질 수 있습니까?


78

다음과 같이 가장 잘 설명 할 수 있습니다.

나는 이것을 원한다 ( editmode모든 행에 전체 테이블 및 저장 버튼).

<table>
    <tr>
        <td>Id</td>
        <td>Name</td>
        <td>Description</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td><input type="hidden" name="id" value="1" /></td>
        <td><input type="text" name="name" value="Name" /></td>
        <td><input type="text" name="description" value="Description" /></td>
        <td><input type="submit" value="Save" /></td>
    </tr>
    <tr>
        <td><input type="hidden" name="id" value="2" /></td>
        <td><input type="text" name="name" value="Name2" /></td>
        <td><input type="text" name="description" value="Description2" /></td>
        <td><input type="submit" value="Save" /></td>
    </tr>
    <!-- and more rows here ... -->
</table>

<form>태그 는 어디에 넣어야 합니까?


3
전체 테이블을 양식 태그로 감싸거나 (그리고 전체 제출) HTML 테이블을 각 "행"이 양식 인 구조 와 같은 테이블로 변환합니다 . 여기를 참조하십시오 : stackoverflow.com/a/15600151/1038812
마태 복음

1
Alexx Roche 답변을 참조하십시오. 나는 그의 대답이 받아 들여 져야한다고 생각한다. 그의 대답은 실제로 문제를 해결합니다.
Fandi Susanto 2014

1
Alexx Roche의 대답은 제 경우에는 최고가 아니었고 실제로 표 형식 정보를 표시하고 있습니다.
adg

답변:


42

당신은 할 수 없습니다. 유일한 옵션은 이것을 여러 테이블로 나누고 그 밖에 양식 태그를 넣는 것입니다. 테이블을 중첩 할 수 있지만 권장되지는 않습니다.

<table>
  <tr><td><form>
    <table><tr><td>id</td><td>name</td>...</tr></table>
  </form></td></tr>
</table>

테이블을 완전히 제거하고 div 및 span과 같은 스타일이 지정된 html 요소로 바꿉니다.


3
동의합니다. 테이블을 사용하지 말고 레이블과 양식 요소 및 CSS를 사용하여 정렬하십시오. websiteoptimization.com/speed/tweak/forms
Dan Diplo

불가능 할까봐 두려웠어요 ... 으 으으으 으으으. 감사합니다
Ropstah

65
기본적으로 "탁자 공포증"이되지 마십시오. 데이터를 표 형식으로 표시해야하는 경우도 많으며 양식이 필요할 수도 있습니다. 나는 현재 이러한 사건 중 하나에 직면하고 있습니다. 결국, 당신은 다른 태그로 흉내 테이블 구문을 결국 ...
페레

89

입력 요소에 "form"속성을 사용하여 HTML5에서 가능하다는 점을 언급 할 가치가 있습니다.

<table>
    <tr>
        <td>Id</td>
        <td>Name</td>
        <td>Description</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td><form id="form1"><input type="hidden" name="id" value="1" /></form></td>
        <td><input form="form1" type="text" name="name" value="Name" /></td>
        <td><input form="form1" type="text" name="description" value="Description" /></td>
        <td><input form="form1" type="submit" value="Save" /></td>
    </tr>
    <tr>
        <td><form id="form2"><input type="hidden" name="id" value="1" /></form></td>
        <td><input form="form2" type="text" name="name" value="Name" /></td>
        <td><input form="form2" type="text" name="description" value="Description" /></td>
        <td><input form="form2" type="submit" value="Save" /></td>
    </tr>
</table>

JS가 부족하고 원래 요소를 사용하는 것이 깨끗하지만 불행히도 IE10에서는 작동하지 않습니다.


1
불행히도 이것은 IE Edge에서 지원 하지 않습니다 : caniuse.com/#feat=form-attribute
Johannes Rudolph

15
즉, 또는 가장자리에 대해 저주를주지 않는 사람들을위한 충분한 대답
hocikto

1
아주 오래된 관리 양식 (매일 사용하는)이 잘못 중첩 된 테이블 양식이 있고 오늘날 Chrome과 Firefox의 개발자 버전에서 작동하지 않는 것을 확인했습니다. </form>시작 태그와 일치하도록를 이동하고 모든 입력 관련 필드에 "form"속성을 추가했으며 행 기반 양식이 즉시 올바르게 작동하기 시작했습니다. 확인한 결과 Edge / IEMobile이이를 지원하지 않는 유일한 브라우저입니다. Microsoft는 최근에 Chromium을 채택한다고 발표했기 때문에 향후 큰 문제가 아닐 수도 있습니다.
James Moberg

64

나는 비슷한 질문 이 있었고이 대답HTML : 양식 표? 나를 위해 해결했습니다. (XHTML인지 확실하지 않지만 HTML5 브라우저에서 작동합니다.)

css를 사용하여 다른 요소에 테이블 레이아웃을 제공 할 수 있습니다.

.table { display: table; } 
.table>* { display: table-row; }
.table>*>* { display: table-cell; }

그런 다음 다음 유효한 html을 사용합니다.

<div class="table"> 
    <form>
        <div>snake<input type="hidden" name="cartitem" value="55"></div>
        <div><input name="count" value="4" /></div>
    </form>
</div>

3
이것은 내 투표를 얻습니다-매우 깨끗한 솔루션 (및 검증 된 작동)!
kwhitley 2013 년

3

유효성을 검사하지 않고 파이어 폭스가 코드를 재정렬 할 수 있지만 할 수 있다고 말하고 싶습니다 (웹 개발자를 사용할 때 '생성 된 소스보기'에 표시되는 내용이 놀라 울 수 있습니다). 나는 전문가는 아니지만

<form action="someexecpage.php" method="post">

바로 앞

<tr>

다음 사용

</tr></form>

행 끝에는 확실히 기능이 제공됩니다 (Firefox, Chrome 및 IE7-9에서 테스트 됨). 나를 위해 일했지만, 그것이 생성 한 유효성 검사 오류의 수가 새로운 개인 최고 / 최악이더라도! 결과로 보이는 문제가 없으며 상당히 스타일이 지정된 테이블이 있습니다. 나는 당신이 동적으로 생성 된 테이블을 가지고있을 수 있다고 생각한다. 그래서 테이블 행을 파싱하는 것은 우리 필사자에게 약간 분명하지 않은 이유이다. 따라서 기본적으로 행의 시작 부분에서 양식을 열고 행 끝 부분에서 닫습니다.


1

<form ... >태그 앞 <table></form>끝에 태그 를 넣으면 됩니다.

도움이되기를 바랍니다.


3
모든 tablerow에 같은 이름을 가진 양식 요소 ... 있기 때문에이 작동하지 않습니다
Ropstah

2
실제로는 잘 작동 것 - 다음 행 'r2_name'에 다음 각 항목, 예를 들어 'r1_name'에 추가 행 번호를, 그것은 구문 분석 ()에 아주 쉽게 서버에이
monk.e.boy

10
많은 경우에 잘 작동하지만 테이블에 1000 개의 행이있는 경우 단일 행을 업데이트하기 만하면 전체를 제출하고 싶지 않을 것입니다.
Mike

1

@wmantly 의 대답 은 기본적으로 내가이 순간에 갈 것입니다. <form>태그를 전혀 사용하지 말고 '부적절한'태그 중첩을 방지하십시오. javascript (이 경우 jQuery)를 사용하여 데이터 게시를 수행합니다. 대부분의 경우 자바 스크립트로 수행합니다. 왜냐하면 한 행만 업데이트해야하고 전체 페이지를 새로 고치지 않고 피드백을 제공해야하기 때문입니다 (전체 페이지를 새로 고치면 단일 행을 게시하기 위해 이러한 모든 trobules를 통과 할 필요가 없습니다.)

클릭 핸들러를 각 행의 '업데이트'앵커에 연결하면 동일한 행에있는 필드의 수집 및 '제출'이 트리거됩니다. data-action앵커 태그의 선택적 속성을 사용 하여 POST의 대상 URL을 지정할 수 있습니다.

예제 html

<table>
    <tbody>
        <tr>
            <td><input type="hidden" name="id" value="row1"/><input name="textfield" type="text" value="input1" /></td>
            <td><select name="selectfield">
                <option selected value="select1-option1">select1-option1</option>
                <option value="select1-option2">select1-option2</option>
                <option value="select1-option3">select1-option3</option>
            </select></td>
            <td><a class="submit" href="#" data-action="/exampleurl">Update</a></td>
        </tr>
        <tr>
            <td><input type="hidden" name="id" value="row2"/><input name="textfield" type="text" value="input2" /></td>
            <td><select name="selectfield">
                <option selected value="select2-option1">select2-option1</option>
                <option value="select2-option2">select2-option2</option>
                <option value="select2-option3">select2-option3</option>
            </select></td>
            <td><a class="submit" href="#" data-action="/different-url">Update</a></td>
        </tr>
        <tr>
            <td><input type="hidden" name="id" value="row3"/><input name="textfield" type="text" value="input3" /></td>
            <td><select name="selectfield">
                <option selected value="select3-option1">select3-option1</option>
                <option value="select3-option2">select3-option2</option>
                <option value="select3-option3">select3-option3</option>
            </select></td>
            <td><a class="submit" href="#">Update</a></td>
        </tr>
    </tbody>
</table>

예제 스크립트

    $(document).ready(function(){
        $(".submit").on("click", function(event){
            event.preventDefault();
            var url = ($(this).data("action") === "undefined" ? "/" : $(this).data("action"));
            var row = $(this).parents("tr").first();
            var data = row.find("input, select, radio").serialize();
            $.post(url, data, function(result){ console.log(result); });
        });
    });

JSFIddle


0

사실 나는 자바 스크립트 (실제로 jquery)를 사용하여 테이블의 각 행에 대한 양식에 문제가 있습니다.

Lothre1이 말했듯이, "렌더링 프로세스의 일부 브라우저는 선언 직후에 요소 외부에 입력을 남기고 양식 태그를 닫을 것입니다."

내 입력 필드를 양식 외부로 만들므로 JAVASCRIPT를 사용하여 DOM을 통해 양식의 하위 항목에 액세스 할 수 없습니다.

일반적으로 다음 JQUERY 코드는 작동하지 않습니다.

$('#id_form :input').each(function(){/*action*/});
// this is supposed to select all inputS 
// within the form that has an id ='id_form'

그러나 위의 예제는 렌더링 된 HTML에서 작동하지 않습니다.

<table>
    <form id="id_form"></form>
    <tr id="tr_id">
    <td><input type="text"/></td>
    <td><input type="submit"/></td>
    </tr>
    </table>

나는 여전히 깨끗한 솔루션을 찾고 있습니다 (DOM을 걷기 위해 TR 'id'매개 변수를 사용하면이 특정 문제를 해결할 수 있지만)

더러운 솔루션은 (jquery의 경우) 다음과 같습니다.

$('#tr_id :input').each(function(){/*action*/});
// this will select all the inputS
// fields within the TR with the id='tr_id'

위의 예는 작동하지만 FORM 대신 TR을 참조하고 AJAX가 필요하기 때문에 실제로 "깨끗한"것은 아닙니다.

편집 : jquery / ajax를 사용한 전체 프로세스는 다음과 같습니다.

//init data string
// the dummy init value (1=1)is just here 
// to avoid dealing with trailing &
// and should not be implemented
// (though it works)
var data_str = '1=1'; 
// for each input in the TR
$('#tr_id :input').each(function(){

 //retrieve field name and value from the DOM
 var field = $(this).attr('name');
 var value = $(this).val();

 //iterate the string to pass the datas
 // so in the end it will render s/g like
 // "1=1&field1_name=value1&field2_name=value2"...
 data_str += '&' + field + '=' + value; 


});

//Sendind fields datawith ajax 
// to be treated 
$.ajax({
 type:"POST",
 url: "target_for_the_form_treatment",
 data:data_string,
 success:function(msg){
    /*actions on success of the request*/
 });
});

이런 식으로 "target_for_the_form_treatment"는 마치 양식이 그에게 전송 된 것처럼 POST 데이터를 수신해야합니다 (post [1] = 1의 appart이지만이 솔루션을 구현하려면 대신 data_str의 후행 '&'를 처리하는 것이 좋습니다) .

여전히이 솔루션이 마음에 들지 않지만 dataTables jquery 플러그인으로 인해 TABLE 구조를 사용해야합니다.


1
이것은 대답 이라기보다는 코멘트에 가깝습니다. 특히 $('#tr_id :input').each(function(){/*action*/});문제를 어떻게 해결 하는지 설명하지 않기 때문 입니다.
Ben D

글쎄, 나는 jquery의 다른 protions를 자세히 설명하기 위해 메시지를 편집했지만 이것이 주석 이상이라고 생각합니다 : javascript는 POST 데이터가 서버로 전송되지만 DOM 계층 구조가 존중되지 않는 이유 중 하나입니다 .. .
renard

inputJavascript를 통해 s 에 액세스하는 방법에 대한 문제를 해결 했지만 처음에는 문제가 아니 었습니다 ... 문제는 OP가 테이블의 각 행이 제출 가능한 양식이되기를 원한다는 것입니다. 귀하의 게시물은 해당 질문에 대한 답변이 아닙니다. 당신은 할 수 가진, 말,로 (테이블의 개별 블록을 제출 JQuery와 / 자바 스크립트를 사용하는 방법을 보여 대답으로 변환 submit은 IT의 부모의 요소의 값 각 행의 손잡이 버튼을 tr다음과가 AJAX에이 값을 전달 우편). 그것을 할 수있는 다른 방법이 있습니다, 당신은 영업의 문제를 해결하는 방법을 제시해야
벤 D

0

파티에 늦었지만 이것은 나를 위해 잘 작동했으며 코드는 스스로 설명해야합니다.

<script type="text/javascript">
    function formAJAX(btn){
        var $form = $(btn).closest('[action]');
        var str = $form.find('[name]').serialize();
        $.post($form.attr('action'), str, function(data){
            //do stuff
        });
    }
<script>

HTML :

<tr action="scriptURL.php">
    <td>
        Field 1:<input type="text" name="field1"/>
    </td>
    <td>
        Field 2:<input type="text" name="field2" />
    </td>
    <td><button type="button" onclick="formAJAX(this)">Update</button></td>
</tr>

@pbalaga : 편집 이력을 확인했지만 편집 되었기 때문에 댓글이 실제로 쓸모 없어서 삭제했습니다.
t0mppa 2014

-1

다음과 같이 tr 요소를 왜곡하는 양식을 추가하려고하면

<table>
<form>
<tr>
<td><input type="text"/></td>
<td><input type="submit"/></td>
</tr>
</form>
</table>

렌더링 프로세스의 일부 브라우저는 선언 직후에 요소 외부에 입력을 남겨두고 양식 태그를 닫습니다.

이 같은

<table>
    <form></form>
    <tr>
    <td><input type="text"/></td>
    <td><input type="submit"/></td>
    </tr>
    </table>

이 문제는 여러 테이블 셀을 왜곡하는 데 여전히 유효합니다.

stereoscott이 위에서 말했듯이 중첩 테이블은 권장되지 않는 가능한 솔루션입니다. 테이블을 사용하지 마십시오.


-1
<table > 
<thead > 
   <tr>
    <th>No</th><th>ID</th><th>Name</th><th>Ip</th><th>Save</th> 
   </tr>
</thead>
<tbody id="table_data"> 
         <tr>
            <td> 
                <form method="POST" autocomplete="off" id="myForm_207" action="save.php">
                    <input type="hidden" name="pvm" value="207"> 
                    <input type="hidden" name="customer_records_id" value="2"> 
                    <input type="hidden" name="name_207" id="name_207" value="BURÇİN MERYEM ONUK"> 
                    <input type="hidden" name="ip_207" id="ip_207" value="89.19.24.118"> 

                </form> 
                1 
            </td> 
            <td> 
                207 
            </td> 
            <td> 
                <input type="text" id="nameg_207" value="BURÇİN MERYEM ONUK"> 
            </td> 
            <td> 
                <input type="text" id="ipg_207" value="89.19.24.118"> 
            </td> 
            <td>
                <button type="button" name="Kaydet_207" class="searchButton" onclick="postData('myForm_207','207')">SAVE</button>
            </td>
        </tr> 
        <tr>
            <td> 
                <form method="POST" autocomplete="off" id="myForm_209" action="save.php">
                    <input type="hidden" name="pvm" value="209"> 
                    <input type="hidden" name="customer_records_id" value="2"> 
                    <input type="hidden" name="name_209" id="name_209" value="BALA BAŞAK KAN"> 
                    <input type="hidden" name="ip_209" id="ip_209" value="217.17.159.22"> 
                </form> 
                2 
            </td> 
            <td> 
                209 
            </td> 
            <td> 
                <input type="text" id="nameg_209" value="BALA BAŞAK KAN"> 
            </td> 
            <td> 
                <input type="text" id="ipg_209" value="217.17.159.22"> 
            </td> 
            <td>
                <button type="button" name="Kaydet_209" class="searchButton" onclick="postData('myForm_209','209')">SAVE</button>
            </td>
        </tr> 
</tbody> 
</table> 
<script> 
function postData(formId,keyy){ 
    //alert(document.getElementById(formId).length);
    //alert(document.getElementById('name_'+keyy).value);
    document.getElementById('name_'+keyy).value=document.getElementById('nameg_'+keyy).value;
    document.getElementById('ip_'+keyy).value=document.getElementById('ipg_'+keyy).value;

    //alert(document.getElementById('name_'+keyy).value);
    document.getElementById(formId).submit(); 
}
</script> 

1
안녕하세요, S / O에 오신 것을 환영합니다. 적극적으로 기여해 주셔서 감사합니다! :) 답변을 확장 해보십시오. 코드뿐 아니라 답변에 대한 컨텍스트를 제공하는 것이 유용합니다. 이 질문이 2009 년에 제기되었다는 점도 주목할 가치가 있습니다. :) 좋은 답변을 어떻게 작성합니까? 읽을만한 가치가 있습니다!
CmdrSharp
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.