[html] 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 및 span과 같은 스타일이 지정된 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>끝에 태그 를 넣으면 됩니다.

도움이되기를 바랍니다.


답변

@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


답변

사실 나는 자바 스크립트 (실제로 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 구조를 사용해야합니다.