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

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

---

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

나는 이것을 원합니다 ( 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>태그 는 어디에 넣어야 합니까?

---

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

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

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

---

입력 요소에 "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에서는 작동하지 않습니다.

---

나는 비슷한 질문 이 있었고이 대답 은 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>

---

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

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

바로 앞

<tr>

다음 사용

</tr></form>

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

---

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

도움이 되었으면합니다.

---

사실 나는 javascript (실제로 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*/
 });
});

this way, the "target_for_the_form_treatment" should receive POST data as if a form was sent to him (appart from the post[1] = 1, but to implement this solution i would recommand dealing with the trailing '&' of the data_str instead).

still I don't like this solution, but I'm forced to use TABLE structure because of the dataTables jquery plugin...

---

If you try to add a form warping a tr element like this

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

some browsers in the process of rendering will close form tag right after the declaration leaving inputs outside of the element

something like this

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

This issue is still valid for warping multiple table cells

As stereoscott said above, nesting tables are a possible solution which is not recommended. Avoid using tables.

---

Im late to the party, but this worked great for me and the code should explain itself;

<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>

참고 URL : https://stackoverflow.com/questions/1249688/html-is-it-possible-to-have-a-form-tag-in-each-table-row-in-a-xhtml-valid-way