테이블 셀 내부에 데이터 표시를 전환합니다

Question

일반 PHP 루프로 생성 된 테이블이 있습니다. 내가하고 싶은 것은 기본적으로 숨겨져있는 각 행의 첫 열에서 양식을 작성하지만 해당 행의 토글 링크를 클릭하면 나타납니다.

HIDDEN이라는 CSS ID를 만들어 정상적인 토글 가능 DIV를 만들 수 있습니다. display: none;. 불행히도 나는 계속 DIV를 만들 수 없습니다 id=hidden 이전 링크와 자동으로 연관되어 있습니다.

나는 JavaScript와 CSS 모두에 대해 경험이 없기 때문에 대부분 예제를 패치하여 이것을 시도했지만 비어 있습니다. 나는 당신이 테이블 안에 divs를 넣을 수없는 곳에서 읽었으므로 아마도 이것을 잘못하고있을 것입니다.

다음은 코드가하는 일과 제가 어떻게 작동하는지에 대한 예입니다. 물론 그렇지는 않습니다.

<script language="JavaScript" type="text/javascript">
    function toggle(id) {
        var state = document.getElementById(id).style.display;
            if (state == 'block') {
                document.getElementById(id).style.display = 'none';
            } else {
                document.getElementById(id).style.display = 'block';
            }
        }
</script>


<?php

while($array = mysql_fetch_array($sql))
    {
?>
<tr>
    <td>
<?php
        echo $array['some_data'];
?>
        <a href="#" onclick="toggle('hidden');">Toggle</a>
        <div id="hidden"><?php echo $array['hidden_thing']; ?></div>
    </td>
    <td>
        <?php echo $array['some_other_data']; ?>
    </td>
</tr>
<?php
    }
?>

Answer 1

각 행에 대해 다른 ID 만 사용합니다.

<?php
$count = 0;
while($array = mysql_fetch_array($sql)) {
  $id = 'hidden' . $count++;
  $data = $array['some_data'];
  $hidden = $array['hidden_thing'];
  $other_data = $array['other_data'];
  echo <<<END
<tr>
  <td>$data <a href="#" onclick="toggle('$id');>Toggle</a>
    <div id="$id">$hidden_thing</div>
  </td>
  <td>$other_data</td>
</tr>

END;
}

Answer 2

일부 브라우저는 테이블 요소 내부의 DIV를 지원하지 않는다고 생각하기 때문에 DIV 대신 범위로 만드십시오. 또한 ID로 언급하는 대신 통과하십시오. this.nextSibling() 토글에, DOM Navigation을 사용하여 다음 형제 (스팬이어야 함)가 표시/숨기도록합니다.

  function toggle(ctl) {
      var state = ctl.style.display;
      if (state == 'block') {
          document.getElementById(id).style.display = 'none';
      } else {
          document.getElementById(id).style.display = 'block';
      }
  }


  <a href="#" onclick="toggle(this.nextSibling);">Toggle
  </a><div><?php echo $array['hidden_thing']; ?></div>

편집하다: @tomhaigh가 제안한 것처럼 (예 : 예제에 표시된대로), 이것이 작동하기 위해서는 앵커와 div 사이에 텍스트/흰색이 없는지 확인해야합니다. DOM 요소가 주어지면 다음 비 텍스트 DOM 요소를 선택하고 반환하는 함수를 작성할 수도 있습니다. 그런 다음 통과합니다 this 그 기능과 결과에 대한 토글 기능.

Answer 3

다음은 권장 (일반 솔루션) 사용입니다 jQuery 각 행과 양식에 대한 ID를 유지하는 대신 비교적 이벤트를 참조합니다. 이를 통해 비활성 행 형식을 쉽게 숨길 수 있습니다. 한 번에 하나의 양식 만 제출할 수 있기 때문에 좋은 아이디어입니다.

HTML :

<table id="tableForms" class="table">
  <tr>
    <td class="rowForm"><form><span>form1 content</span></form></td>
    <td class="showRowForm">click on row to show its form</td>
    </tr>
  <tr>
    <td class="rowForm"><form><span>form2 content</span></form></td>
    <td class="showRowForm">click on row to show its form</td>
    </tr>
  <tr>
    <td class="rowForm"><form><span>form3 content</span></form></td>
    <td class="showRowForm">click on row to show its form</td>
    </tr>
</table>

자바 스크립트 :

<script type="text/javascript" src="/assets/js/jquery.min.js"></script>
<script type="text/javascript">
//as soon as the DOM is ready, run this function to manipulate it
$(function() {
    // get all tr elements in the table 'tableForms' and bind a 
    // function to their click event
    $('#tableForms').find('tr').bind('click',function(e){
        // get all of this row's sibblings and hide their forms.
        $(this).siblings().not(this).find('td.rowForm form').hide();

        // now show the current row's form
        $(this).find('td.rowForm form').show();
    }).
    // now that the click event is bound, hide all of the forms in this table
    find('td.rowForm form').hide();
});
</script>

데모:

이것의 작동하는 데모를 찾을 수 있습니다 여기.