1. 홈
  2. 질의 응답
  3. 표 형식 (X) HTML 양식

표 형식 (X) HTML 양식

2010-04-08 8 views
4

다양한 상태가 될 수있는 항목 집합이 있습니다. 나는 사용자가표 형식 (X) HTML 양식

  • 변화 상태로 (X) HTML 양식을 사용할 수 있도록하려면, 그리고
  • 쉽게이 너무 ... 객체

그룹의 상태를 볼

이 
| item1 | radio button for state 1 | radio for state 2 | ... | [update button] | 
| item2 | radio button for state 1 | radio for state 2 | ... | [update button] |

등 나는 그것이 시각적으로 특정 상태에서 물건을 검색하는 사용자를 위해 쉽게 있도록 상자를 나열 라디오 버튼을 선호 : 말은, 내가 좋아하는 레이아웃을하고 싶습니다.

그것은 완벽하게 표의 데이터처럼 보였습니다. 유일한 문제는 표 셀을 가로 지르는 표 안에 양식을 포함 할 수 없다는 것입니다 (예 : <tr> <form> <td> ...이 유효하지 않음).

"어이, 나는 테이블을 감싸는 하나의 거대한 형식을 가질 수 있고 [업데이트 버튼] 값에 각 행의 ID가 포함될 수 있습니다!"라고 생각했습니다. 특정 버전의 IE가 하나의 양식에 모든 보내기 버튼 값을 보냅니다.

그래서 나는 <div>으로 레이아웃을하고 양식을 하나의 <td> 안에 넣으려고했습니다. 그러나 그들은 각각 <div>에 선을 긋는다. 그래서 나는 그들의 너비를 고치고 그들을 float: left로 만들었다. 그러나 테이블 행이 페이지보다 넓고 라디오 컨트롤이 제목과 일 치하지 않으면 테이블 셀 안에 래핑됩니다.

내가 의도 한대로 이것을 배치 할 수 있습니까? 아래의 XHTML은 의도 된 구조를 보여줍니다. 브라우저 윈도우의 크기를 테이블의 너비보다 낮게 만들면 어떤 일이 일어나는지 관찰하십시오 (이상적으로는 이름이 깨지거나 테이블에 스크롤 바가 표시되는 것이 이상적입니다).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head><title>Test</title> 

<style type="text/css"> 

.state-select, .thing-state-name, .update { 
    float: left; 
    width: 8em; 
} 

.state-select { 
    text-align: center; 
} 

</style> 

</head> 

<body> 

<table> 

<thead> 

<tr> 
<th class="thing-name-header">Thing</th> 

<th> 
<div class="thing-state-name">Present</div> 
<div class="thing-state-name">Absent</div> 
<div class="thing-state-name">Haven't looked</div> 
</th> 

</tr> 
</thead> 

<tbody> 

<tr> 
<td>Apple</td> 

<td> 
<form action="something" method="post"> 

<input type="hidden" name="id" value="1" /> 

<div class="state-select"><input type="radio" name="presence" value="present" checked="checked" /></div> 
<div class="state-select"><input type="radio" name="presence" value="absent" /></div> 
<div class="state-select"><input type="radio" name="presence" value="unknown" /></div> 
<div class="update"><input type="submit" value="Update" /></div> 

</form> 

</td></tr> 

<tr> 

<td>Orange</td> 

<td> 
<form action="something" method="post"> 

<input type="hidden" name="id" value="2" /> 

<div class="state-select"><input type="radio" name="presence" value="present" /></div> 
<div class="state-select"><input type="radio" name="presence" value="absent" checked="checked" /></div> 
<div class="state-select"><input type="radio" name="presence" value="unknown" /></div> 
<div class="update"><input type="submit" value="Update" /></div> 

</form> 

</td></tr> 

<tr> 

<td>David Bowie</td> 

<td> 
<form action="something" method="post"> 

<input type="hidden" name="id" value="3" /> 

<div class="state-select"><input type="radio" name="presence" value="present" /></div> 
<div class="state-select"><input type="radio" name="presence" value="absent" /></div> 
<div class="state-select"><input type="radio" name="presence" value="unknown" checked="checked" /></div> 
<div class="update"><input type="submit" value="Update" /></div> 

</form> 

</td></tr> 

</tbody> 

</table> 

</body> 
</html>

출처

2010-04-08 detly

답변

3

이유는 상기와 같이 하나 개의 형태 원소 전체 테이블을 바꿈 대신 "존재"라디오 버튼 그룹 각각 네이밍 ID가 행의 ID는 "존재 [ID]"에게 밝히지하면 업데이트 중입니다. 예를 들면 :

<div class="state-select"><input type="radio" name="presence[0]" value="ipresent" checked="checked" /></div> 
<div class="state-select"><input type="radio" name="presence[0]" value="absent" /></div> 
<div class="state-select"><input type="radio" name="presence[0]" value="unknown" /></div> 
<div class="update"><input type="submit" value="Update" /></div>

... 

<div class="state-select"><input type="radio" name="presence[1]" value="present" checked="checked" /></div> 
<div class="state-select"><input type="radio" name="presence[1]" value="absent" /></div> 
<div class="state-select"><input type="radio" name="presence[1]" value="unknown" /></div> 
<div class="update"><input type="submit" value="Update" /></div>

은 그럼 당신은 라디오 버튼의 각 그룹을 통해 루프 PHP를 쉽게 사용할 수 있습니다 쉽게 모든 필드를 업데이트합니다. 위의 코드와 함께 아래 코드를 테스트 한 결과 꽤 잘 돌아갔다. 제공된 코드를 사용하여이 구현 

<? 
foreach($_POST['presence'] as $id => $value){ 
    echo "ID ".$id." is ". $value . "<br>"; 
    //Run your update code with the variables $id and $value 
} 
?>

은 다음과 같이 보입니다 :

<? 

if(isset($_POST['update'])){ 
    foreach($_POST['presence'] as $id => $value){ 
     echo "ID ".$id." is ". $value . "<br>"; 
     //Run your update code with the variables $id and $value 
    } 
} ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head><title>Test</title> 

<style type="text/css"> 

.state-select, .thing-state-name, .update { 
    float: left; 
    width: 8em; 
} 

.state-select { 
    text-align: center; 
} 

</style> 

</head> 

<body> 

<form method="post"> 
<table> 

<thead> 

<tr> 
<th class="thing-name-header">Thing</th> 

<th> 
<div class="thing-state-name">Present</div> 
<div class="thing-state-name">Absent</div> 
<div class="thing-state-name">Haven't looked</div> 
</th> 

</tr> 
</thead> 

<tbody> 

<tr> 
<td>Apple</td> 

<td> 

<div class="state-select"><input type="radio" name="presence[1]" value="present" checked="checked" /></div> 
<div class="state-select"><input type="radio" name="presence[1]" value="absent" /></div> 
<div class="state-select"><input type="radio" name="presence[1]" value="unknown" /></div> 
<div class="update"><input type="submit" name="update" value="Update" /></div> 

</td></tr> 

<tr> 

<td>Orange</td> 

<td> 

<div class="state-select"><input type="radio" name="presence[2]" value="present" /></div> 
<div class="state-select"><input type="radio" name="presence[2]" value="absent" checked="checked" /></div> 
<div class="state-select"><input type="radio" name="presence[2]" value="unknown" /></div> 
<div class="update"><input type="submit" name="update" value="Update" /></div> 
</td></tr> 

<tr> 

<td>David Bowie</td> 

<td> 

<div class="state-select"><input type="radio" name="presence[3]" value="present" /></div> 
<div class="state-select"><input type="radio" name="presence[3]" value="absent" /></div> 
<div class="state-select"><input type="radio" name="presence[3]" value="unknown" checked="checked" /></div> 
<div class="update"><input type="submit" name="update" value="Update" /></div> 

</td></tr> 

</tbody> 

</table> 
</form> 

</body> 
</html>

을 그리고 양식을 제출하면 줄 것이다 :

ID 1 is present 
ID 2 is absent 
ID 3 is unknown

출처

2010-04-08 06:27:31 Sam152

+1

흥미로운 접근 방식을하지만,이 경우 20 개 항목 말한다 페이지 당 하나씩 업데이트되고 하나가 업데이트되면 서버는 변경되지 않은 데이터의 20 배를 처리해야합니다. 그럼에도 불구하고 여러 개의 업데이트가 도움이 될 수 있습니다. (또한 CherryPy 백엔드 + Cheetah 템플릿 처리이므로 PHP는 없지만 그럼에도 불구하고 가능합니다.) – detly

+1

공, 왜 내가 PHP인지 추측 할 수 없습니다. – Sam152

+0

죄송 합니다만, 저는 이것을 받아들이는 것을 거의 잊었습니다. 이 접근 방식은 클라이언트 측 JS 및 AJAX를 사용하여 서버 과용을 방지하는 데 가장 효과적입니다.결국 어쨌든 목록 상자를 사용하여 끝났지 만, 이는 합리적인 것인지 아닌지 파악하는 데 도움이되었습니다. – detly

관련 문제

 관련 문제