테이블 안에 양식
새 행을 추가하고 현재 행을 업데이트하기 위해 HTML 테이블에 일부 양식을 포함시킵니다. 내가 얻는 문제는 dev 도구에서 양식을 검사 할 때 양식 요소가 열린 직후 닫힙니다 (입력 등이 양식에 포함되지 않음).
따라서 양식을 제출하면 필드가 포함되지 않습니다.
테이블 행과 입력은 다음과 같습니다.
<tr>
<form method="post" action="">
<td>
<input type="text" name="job_num">
</td>
<td>
<input type="text" name="desc">
</td>
</form>
</tr>
어떤 도움이라도 좋을 것입니다, 감사합니다.
양식이되어 허용되지 의 하위 요소로 table, tbody또는 tr. 하나를 넣으려고하면 브라우저가 테이블 뒤에 나타나는 형식으로 이동하는 경향이 있습니다 (테이블 행, 테이블 셀, 입력 등의 내용은 그대로 두십시오 ).
양식 안에 전체 테이블이있을 수 있습니다. 테이블 셀 안에 양식을 가질 수 있습니다. 양식 안에 테이블의 일부를 가질 수 없습니다.
전체 테이블 주위에 하나의 양식을 사용하십시오. 그런 다음 클릭 한 제출 단추를 사용하여 처리 할 (빠른) 행을 결정하거나 모든 행을 처리 (대량 업데이트 허용)하십시오.
마크 업을 저장 하려면 "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>
: 당신은 "편집 가능한 그리드"즉, 폼 행 중 하나를 만들 수 있습니다 구조와 같은 테이블, 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>
FORM에서 전체 TABLE을 래핑 할 때 발생하는 문제는 제출할 때 모든 양식 요소가 전송된다는 것입니다 (원할 수도 있지만 아닐 수도 있음). 이 방법을 사용하면 각 "행"에 대한 양식을 정의하고 제출시 해당 데이터 행만 보낼 수 있습니다.
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/
참고 URL : https://stackoverflow.com/questions/5967564/form-inside-a-table
'IT story' 카테고리의 다른 글
| 입력 파일을 열 수 없습니다 : 장인 (0) | 2020.04.22 |
|---|---|
| 왜 세로 정렬 : 중간이 스팬 또는 div에서 작동하지 않습니까? (0) | 2020.04.22 |
| enum 값을 int로 변환하는 방법? (0) | 2020.04.22 |
| ASP.NET Core 웹 API 예외 처리 (0) | 2020.04.22 |
| ASP.NET MVC 컨트롤러 메소드에서 JSON.NET으로 직렬화 된 camelCase JSON을 어떻게 반환 할 수 있습니까? (0) | 2020.04.22 |