1

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

但它不起作用

我该怎么做？

提前致谢！

4

2 回答 2

1

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

将您的脚本更改为：

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

演示小提琴

你更新的小提琴没有 724

笔记：

.on()需要jquery version 1.7+

于 2013-10-07T07:12:41.630 回答
0

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

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

让我们试一试。

于 2013-10-07T07:01:03.593 回答