Переключить отображение данных внутри ячейки таблицы

Question

У меня есть таблица, которая генерируется обычным циклом PHP. Что я хочу сделать, это создать форму в первом столбце каждой строки, которая по умолчанию скрыта, но появляется при нажатии на ссылку переключения в этой строке.

Я могу сделать обычный div с возможностью переключения, создав CSS-идентификатор с именем hidden и установив display: none;. К сожалению, я не могу продолжать создавать div с id=hidden, которые автоматически связываются с предыдущей ссылкой.

Я довольно неопытен как с Javascript, так и с CSS, поэтому я в основном пытался сделать это, исправляя примеры, но я выхожу пустым. Я читал в некоторых местах, что вы не можете поместить div внутри таблицы, так что, возможно, я все делаю неправильно.

Вот пример того, что делает код, и как бы я хотел, чтобы он работал, но, конечно, это не так.

<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

Сделайте это span вместо DIV, так как я думаю, что некоторые браузеры не поддерживают div внутри элементов таблицы. Кроме того, вместо того, чтобы ссылаться на него по идентификатору, передайте this.nextSibling() переключателю, используя навигацию DOM, чтобы отобразить / скрыть следующего брата (который должен быть SPAN).

  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>

EDIT : Как подсказывает @tomhaigh (и как показано в примере), чтобы это работало, вам нужно убедиться, что между якорем и div нет текста / пробела. Вы также можете написать функцию, которая, учитывая элемент DOM, выберет следующий нетекстовый элемент DOM и вернет его. Затем передайте this этой функции, а результат - функции переключения.

Answer 3

Вот мое рекомендуемое (общее решение) использование jQuery для ссылки на события относительно вместо сохранения идентификаторов для каждой строки и формы. Это также позволяет легко скрывать неактивные формы строк, что является хорошей идеей, поскольку одновременно может быть отправлена ​​только одна форма.

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>

Javascript:

<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>

Демо:

Рабочую демонстрацию этого можно найти здесь .