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

Question

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

Я могу создать обычный div с возможностью переключения, создав идентификатор CSS под названием «скрытый» и установив 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

Просто используйте разные идентификаторы для каждой строки:

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

РЕДАКТИРОВАТЬ . Как подсказывает @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>

Демо:

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