Question

嗯，问题是我有一个有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();
    });
});

但它不起作用

我该怎么做？

提前致谢！

Answer 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+

Answer 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>

让我们试一试。

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

2 个答案:

注意：