如何在表格中显示隐藏特定的 div？答案

【问题标题】：How to show hide specific div in table?如何在表格中显示隐藏特定的 div？
【发布时间】：2017-06-13 10:24:25
【问题描述】：

HTML:-

'<td>' + item.Message + ' <input type="button" class="btn btn-info" id="' + item.LogID + '" onclick="Clicked(this);" value="View More"  /> <p> ' + item.FormattedMessage + ' </p></td></tr>'

这是表格中的按钮

jQuery:-

 function Clicked(e)
        {
            var SelectedID = e.id;
            $("p").toggle();
        };

在此当我单击按钮时，我只想显示选定的 id 列并隐藏其余列。但是当我点击按钮时，它会显示所有列或隐藏所有列

【问题讨论】：

var SelectedID = e.id; $("#" + SelectedID).next().toggle();

标签： javascript jquery html css asp.net-mvc

【解决方案1】：

除了balachandar回答。如果您想最初隐藏p 标签，请使用display:none 作为p 标签

function Clicked(e)
    {
        var SelectedID = e.id;
        
        $("#"+SelectedID).next("p").toggle(function(){
        
          var btn_text =  $("#"+SelectedID).val();
  
          if(btn_text == "View More"){
    
             $("#"+SelectedID).val("Hide");
          }else{
           $("#"+SelectedID).val("View More")
          }
        
        
        });
       
     
    
    };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="btn btn-info" id="myID" onclick="Clicked(this)" value="View More"  /> <p style="display:none"> Some Text you want to in future </p>

【讨论】：

请修改如下代码 $("#"+SelectedID).next("p").toggle();我在 toggle() 方法之前错过了 .(dot)。
谢谢@balachandar
什么不起作用？你还能看到p标签吗？你添加样式属性了吗？
是添加了显示属性，但是当我点击按钮时它不显示 p
你的p标签最初是隐藏的吗？

【解决方案2】：

试试下面的代码

 function Clicked(e)
    {
        var SelectedID = e.id;
        $("#"+SelectedID).next("p").toggle();
    };

希望这会对你有所帮助。

【讨论】：

成功了！！！！但我它显示“P”内容。我想隐藏 P 内容。当我点击按钮时，它应该显示 P 内容
@RookieCoder 你想在点击按钮时隐藏和显示 p 内容吗？

【解决方案3】：

您可以通过其 id 选择元素并在其中找到 p 元素：

 function Clicked(e)
    {
        var SelectedID = e.id;
        $("#" + SelectedID).find("p").toggle();
    };

或者直接使用this:

 function Clicked(e)
    {
        $(this).find("p").toggle();
    };

【讨论】：

【解决方案4】：

function Clicked(e)
    {
        var SelectedID = e.id;
        $("#" + SelectedID).toggle();
    };

【讨论】：

【解决方案5】：

你可以使用：

function Clicked(d)
{
    var SelectedID = d.id;
    $("#" + SelectedID).toggle();
};

【讨论】：

【解决方案6】：

这个函数会在你的表格的td中选择所有p并隐藏它们，然后它只显示与按钮具有相同ID的那个。

function Clicked(e) {
    var SelectedID = e.id;
    $("td p").hide();
    $("#" + SelectedID).show();
};

【讨论】：