Question

我创建了一个动态按钮，每个按钮都是一样的：

<input type="button" id="editBtn" value="Edit" style="float: right" />//each button has its id ofcourse

按下一个按钮时会显示一个表格。如果点击页面上的其他按钮，我正在寻找一种“点击最后一个按钮”/“隐藏表格”的方法。

使用Jquery，有可能吗？或者有更好的方法吗？

Answer 1

如果您想使用按钮（隐藏/显示）显示内容

您可以使用jquery toogle函数

完成此操作

$(document).ready(function()
{
    $("#button").click(function()
    {
        $("#table").toggle();
    });
});

链接到fiddle

Answer 2

只需隐藏所选表格的所有兄弟姐妹......

例如，如果你有（伪代码）

<input type="button" id="editBtn1" value="Edit" onclick="showTable(1)" />
<input type="button" id="editBtn2" value="Edit" onclick="showTable(2)" />
<input type="button" id="editBtn3" value="Edit" onclick="showTable(3)" />

<table id="table1">...</table>
<table id="table2">...</table>
<table id="table3">...</table>

JS将是：

function showTable(tableid) {
    $("#table" + tableid).show().siblings().hide();
}

但是，当然，这都是非常硬编码的＆amp;因此是一种可以避免的做法

或者如评论中所述：

function showTable() {

    var tableId = $(this).index();

    $("table").hide().eq(tableId).show();
}

Answer 3

我想我解决了你的问题试试这个小提琴......

  See output on below fiddle

Js fiddle

风格：

.tbl{
 display:none;
 }

Jquery的：

  $(".btn").click(function(){
  var $this = $(this).next("table");
  $( this ).next("table").removeClass("tbl"); 
  $(".btn").next("table").not($this).addClass("tbl");
  });

HTML：

 <div class="tble">
  <input type="button"  value="Button1" class="btn"/>
  <table class="tbl"><tr><td>test1</td></tr></table>
 </div> 

 <div class="tble">
  <input type="button"  value="Button2" class="btn" /> 
  <table class="tbl"><tr><td>test2</td></tr></table>
 </div>

Answer 4

我认为这就是你想要的：http://jsfiddle.net/BY27P/9/

这将记住您查看过的表，并让您使用基本的JavaScript数组push / pop查看所有以前的表。

这是JavaScript（完整代码的视图小提琴）：

var viewedTableHistory = [];

hideAllTables=function(){
    $('table[id^="table"]').hide();  //hide all tables
}

loadTable=function(id){
    viewedTableHistory.push(id);
    $('#history').text(viewedTableHistory);
    hideAllTables();
    showCurrentTable();
};

hideCurrentTable=function()
{
    $('#table'+viewedTableHistory[viewedTableHistory.length-1]).hide();
};

showCurrentTable=function()
{
    $('#table'+viewedTableHistory[viewedTableHistory.length-1]).show();
};

viewPrevTable=function()
{
    hideAllTables();
    viewedTableHistory.pop();
    $('#history').text(viewedTableHistory);
    if(viewedTableHistory.length===0) alert('You are back to the beginning.');
    showCurrentTable();
};

如何找到最后点击的动态按钮

4 个答案: