数据表行详细信息中的隐藏/显示按钮答案

【问题标题】：hide/show button in datatables row details数据表行详细信息中的隐藏/显示按钮
【发布时间】：2013-10-07 06:51:48
【问题描述】：

好吧，问题是我有一个包含 40 行的自定义数据表（目前），每行都有一些详细信息，最近我在每行详细信息内容中添加了一个“编辑选项”。代码基于：https://datatables.net/release-datatables/examples/api/row_details.html 但我将 FormatDetails 修改为：

function fnFormatDetails ( oTable, nTr )
    {   
        var aData = oTable.fnGetData( nTr );
        var sOut = '<input type=\'button\' id=\'hideshow\' value=\'hide/show\'><table id="tablaeditar" class="tablaeditar">';
        sOut += '<tr><td><input id="nombref" placeholder="Nombre de Fantasia" type="textbox" value="'+aData[1]+'" maxlength="40" onkeypress="return permite(event, \'car\')" /></td>' + 
                '<td><input id="titular" placeholder="Titular" type="textbox" value="'+aData[2]+'" maxlength="40" onkeypress="return permite(event, \'car\');" /></td>' +
                '<td><input id="direccion" placeholder="Direccion" type="textbox" value="'+aData[3]+'" maxlength="50" onkeypress="return permite(event, \'num_car\')"/></td></tr>' +
                '<tr><td><input id="telefono" placeholder="Telefono" type="textbox" value="'+aData[4]+'" maxlength="30" onkeypress="return permite(event, \'num\');" /></td>' +
                '<td><input id="email" placeholder="Email" type="textbox" value="'+aData[5]+'" maxlength="40" /></td>' +
                '<td><input id="paginaweb" type="textbox" placeholder="Pagina Web" value="'+aData[6]+'" maxlength="40" /></td></tr>' +
                '<tr><td><input id="comentarios" type="textbox" placeholder="Comentarios" value="'+aData[7]+'"  maxlength="40"></td>' +
                '<td><input id="metros" type="textbox" placeholder="Superficie" value="'+aData[8]+'" maxlength="5" onkeypress="return permite(event, \'num\');" /></td>' +
                '<td align="center"><div class="aceptar"><input type="button" value="Aceptar"></input></div></td></tr>'
        sOut += '</table>';

        return sOut;
    }

如您所见，我将整行信息放入输入中，并且由于在每行详细信息中显示的代码很长，因此我想放置一个按钮，该按钮可以显示和隐藏带有“edittable”类的 sOut 表。像这样简单的东西：http://jsfiddle.net/vVsAn/1/

我尝试使用以下代码来做到这一点：

$(document).ready(function() {  
    $('#hideshow').on('click', function(){
    $(this).closest('table.tablaeditar').toggle();
    });
});

但它不起作用

我该怎么做？

提前致谢！

【问题讨论】：

首先检查静态细节。使用 jsfiddle。
静态细节的代码与我在jsfiddle.net/vVsAn/1 中显示的几乎相同，但它对我不起作用（当然只是在 API 的代码中）
第一次运行代码，然后获取 html 并放入 jsfiddle。
您的小提琴没有与您在此处发布的问题相关的代码。
@jai 所以我只用实时代码询问。

标签： javascript jquery datatable

【解决方案1】：

这是事件委托的问题，您必须将事件委托给静态现有父元素或document，它始终可用，如下所示：

把你的脚本改成这样：

$(document).on('click', '#hideshow', function(){
    $(this).next('table.tablaeditar').toggle();
});

Demo Fiddle

Your updated fiddle no 724

注意：

.on() requires jquery version 1.7+

【讨论】：

是的，你必须把它放在doc ready 块中。
现在还不行，我给大家看一下整个代码，让大家更容易理解：jsfiddle.net/HEDvf/721
在行详细信息中，我遇到了“显示/隐藏详细信息”img 的问题。这里是固定的：jsfiddle.net/HEDvf/723，你必须点击“+”img来显示行的详细信息
Isint toggle() 在 1.8+ 中已弃用？还有其他更好的方法吗？
@SankalpSingha 不完全是您在谈论.toggle(fn, fn)。我发布的是这样的：api.jquery.com/toggle

【解决方案2】：

或者你甚至可以使用下面的切换脚本

<script type="text/javascript"> 
$(function(){
   $("#BtnToggle").click(function(){
      $('#divTogg').toggle(1000);
    });
  });
</script>


<style type="text/css"> #divTogg{width: 200px;height: 100px;border: solid 1px black;background-color:LightGrey;text-align:center; display:none;}</style>

让我们试一试。

【讨论】：