使用跨度隐藏和显示内容

时间:2019-11-21 23:56:44

标签: php jquery ajax

我在php和jquery中都是新手。我想使用span来隐藏和显示html和php中的内容。我可以使用jQuery吗?如果是,我该怎么办?我已经把jQuery脚本放到页面底部了。这是我的代码:

    <!-- reply -->
    <span title="fas fa-reply" name="reply" data-id="1" 
    </span>
    <!-- if span clicked show all these data... -->
    <table class="table table-borderless" style="margin-top:50px;">
        <thead class="bg-secondary pb-0">
        <tr>
            <th colspan="3" class="pb-0">
            <p class="test text-light">Creating Reply <?php echo $rowAllPost["id"]; ?>
            </p></th>
            <th class="pb-0 text-right">
            </th>
            </tr>
        </thead>
            <th scope="row" style="width:15rem!important;">
            <img src="<?php echo $rowViewUserNow["picture"];?>" class="rounded-circle" style=height:93px;width:81px;><br>
            <p class="ml-3"> Online</p>
            <p class="ml-2"> <?php echo $rowViewUserNow["username"];?>
            </p>
            <i class="fas fa-info-circle pr-2 pt-2"></i>Active
            <td colspan="3" class="text-justify">
            <form action="controller/doCheckPost.php" method="post">
                <textarea name="description" class="form-control"></textarea>
            </td>
        </tr>
        <tr class="bg-secondary pb-0" >
            <th colspan="3" class="pb-0">
            <button title="Cancel" class="btn" type="submit" name="cancel"><i class="fas fa-times"></i></th></button>
            <th class= "pb-0 text-right">
            <button title="Submit" class="btn" name="submit"><i class="fas fa-check"></i></button>
            </form>
            </th>
            </th>
        </tr>
            </div>
        </tbody>
    </table>

1 个答案:

答案 0 :(得分:1)

最好的方法是首先给span和table元素都赋予一个id。然后,您可以像这样在jQuery中使用event handler

$('#spanId').on('click', function() {
  $('#tableId').toggle();
});

Toggle将显示元素(如果已隐藏),并且将其隐藏(如果可见)。