使用 javascript 隐藏/显示 table

Question

我有一个小问题要隐藏和显示 table。我 tred 这个，我在控制台中没有错误，但它不起作用。可能是我记错了或者记错了。

我在代码中看到了数据，但是当我点击 link 时它没有出现。

谢谢

      $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++;
      }

Answer 1

您可以先调整您使用 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) 您不需要调整 table 构建（来自 while 循环的构建）：

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

4) 然后调整你的 SINGLE 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>

这应该可以让您在单击其中一个 link 时显示 table（它周围的 div）。当然看起来你还有更多的事情在那里，table 行，href link 值的东西，以及排序，但你只询问显示 table 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>

使用 javascript 隐藏/显示 table

Hide / show table with javascript

javascript

php

jquery

twitter-bootstrap-4