다음과 같이 가장 잘 설명 할 수 있습니다.
나는 이것을 원한다 ( editmode모든 행에 전체 테이블 및 저장 버튼).
<table>
<tr>
<td>Id</td>
<td>Name</td>
<td>Description</td>
<td> </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> </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); });
});
});
답변
사실 나는 자바 스크립트 (실제로 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 구조를 사용해야합니다.
