Скрыть / показать таблицу с помощью JavaScript

Question

Скрыть / показать таблицу с помощью JavaScript

У меня есть небольшая проблема, чтобы скрыть и показать таблицу. Я пробовал это, у меня нет ошибки в консоли, но она не работает. Может быть, я что-то забыл или ошибся.

Я видел данные внутри кода, но они не появляются, когда я нажимаю на ссылку.

Спасибо

      $i = 0;

foreach($option_attributes_name as $value) {
$content .= '    <li class="col-md-12"><a onclick="showTabOption' . $i .'" class="nav-link" data-toggle="tooltip" data-target="#section_ProductsAttributesNewApp_content" href="' . OSCOM::link('index.php?A&Catalog\Products&Edit&cPath=' . $_GET['cPath'] . '&pID=' .  $_GET['pID'] . '#tab-option' . $i) . '"><i class="fa fa-minus-circle"></i> ' . $value['name'] . '</a></li>';
//        $i++;
$t++;
}

$Qoption = $this->app->db->prepare('select option_id, type
from :table_test_products_options_attributes');
$Qoption->execute();

$i =0;
while ($Qoption->fetch()) {

$content .= '<div id="tab-option' . $i . '" style="display:none;">';
$content .= '<h4>' . $Qoption->value('type') . '</h4>';
$content .= '<table width="100%" cellpadding="5" cellspacing="0" border="0">
</table>
</div>
';
$content .= '
<script type="text/javascript"><!--
function showTabOption' . $i . '() {
$("a[href=\'#tab-option' .$i . '\']").parent().remove();
$(\'#tab-option'. $i . '\').remove();
$(\'#option a:first\').div(\'show\');
}
//--></script>
';
$i++;
}

-2

javascript jquery php twitter-bootstrap-4

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Сначала вы можете решить несколько вопросов, настроив способ работы с помощью js и jquery.

1) Настройка элементов, которые вы будете нажимать, просто class, а также data-tableid:

$content .= '<li class="col-md-12"><a class="showTabOption nav-link" data-tableid="'. $i .'" ... etc etc ...</a>';
^^^^^^^^^^^^^           ^^^^^^^^^^^^^^^^^^^^

2) Исправьте это в вашем первом цикле: Изменить $t++; в $i++;,

3) Вам не нужно настраивать сборки таблиц (те из while петля):

$content .= '<div id="tab-option'. $i .'" style="display:none;">';// this is ok

4) Затем настройте одну функцию JavaScript. У него выход за пределы while цикл (так как это должно быть сделано только один раз):

<script language="Javascript" type="text/javascript">
$( document ).ready(function() {
$(".showTabOption").click(function(e) {
e.preventDefault();                    // stop the a href from firing off
var tableid = $(this).data('tableid'); // the table in question
$(this).parent().remove();             // remove what you clicked?
$("#tab-option"+ tableid ).show();     // show your options table
});
});
</script>

Это должно привести к тому, что эта таблица (div, окружающий ее) будет отображаться при нажатии на одну из этих ссылок. Конечно, похоже, что у вас там происходит гораздо больше: строки таблицы, что-то со значением ссылки href и тому подобное, но вы только спрашивали об отображении таблицы div.

TL; DR: Полный пример вашего примера кода скорректирован:

<?php
$i = 0;
foreach($option_attributes_name as $value) {
$content .= '<li class="col-md-12"><a class="showTabOption nav-link" data-tableid="'. $i .'" data-toggle="tooltip" data-target="#section_ProductsAttributesNewApp_content" href="'. OSCOM::link('index.php?A&Catalog\Products&Edit&cPath='. $_GET['cPath'] .'&pID='.  $_GET['pID'] .'#tab-option'. $i) .'"><i class="fa fa-minus-circle"></i> '. $value['name'] .'</a></li>';
$i++;
}
$Qoption = $this->app->db->prepare('select option_id, type
from :table_test_products_options_attributes');
$Qoption->execute();
$i = 0;
while ($Qoption->fetch()) {
$content .= '<div id="tab-option'. $i .'" style="display:none;">';
$content .= '<h4>'. $Qoption->value('type') .'</h4>';
$content .= '<table width="100%" cellpadding="5" cellspacing="0" border="0">';
// table tr rows go here
$content .= '</table>';
$content .= '</div>';
$i++;
}
?>

<script language="Javascript" type="text/javascript">
$( document ).ready(function() {
$(".showTabOption").click(function(e) {
e.preventDefault();                    // stop the a href from firing off
var tableid = $(this).data('tableid'); // the table in question
$(this).parent().remove();             // remove what you clicked?
$("#tab-option"+ tableid ).show();     // show your options table
});
});
</script>

2