Javascript datatables行详细信息中的隐藏/显示按钮

问题是，我有一个自定义datatables，它有40行（目前），每行都有一些详细信息，最近我在每行详细信息内容中添加了一个“编辑选项”。 代码基于以下内容： 但我将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;
    }

但它不起作用

我怎么做

---

提前谢谢

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

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

$（函数（）{
$（“#btntogle”）。单击（函数（）{
$（'#divTogg'）。切换（1000）；
});
});
#divTogg{宽度：200px；高度：100px；边框：纯黑1px；背景色：浅灰色；文本对齐：居中；显示：无；}

---

让我们试一试。

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

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

$（函数（）{
$（“#btntogle”）。单击（函数（）{
$（'#divTogg'）。切换（1000）；
});
});
#divTogg{宽度：200px；高度：100px；边框：纯黑1px；背景色：浅灰色；文本对齐：居中；显示：无；}

---

让我们试一试。

这是事件委派的问题，您必须将事件委派给静态现有父元素或始终可用的

文档，如下所示：

将脚本更改为：

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





注:
这是事件委派的问题，您必须将事件委派给静态现有父元素或
文档，该文档始终可用，如下所示：

将脚本更改为：

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





注:
首先检查静态详细信息。使用JSFIDLE。静态详细信息的代码几乎与我在中展示的相同，但它对我不起作用（当然，仅在API的代码中）。首先运行代码，然后获取html并将其放入JSFIDLE。您的fiddle没有与您的问题相关的代码张贴在此处。@jai所以我只使用实时代码提问。请先查看静态详细信息。使用JSFIDLE。静态详细信息的代码几乎与我在中显示的相同，但它对我不起作用（当然，仅在API的代码中）。首先运行代码，然后获取html并放入JSFIDLE。您的FIDLE没有与您的问题相关的代码张贴在此处。@jai所以我只使用实时代码提问。是的，绝对，您必须将其放入
doc ready
块中。它还不起作用，但让我向您展示整个代码，以便更容易理解：在行详细信息中，我对“显示/隐藏详细信息”img有问题。这里是固定的：jsfiddle.net/HEDvf/723，您必须单击“+”img来显示1.8+中不推荐使用的行detailsIsint toggle（）？还有更好的方法吗？@SankalpSingha不完全是你说的
。切换（fn，fn）
。我发布的是：是的，当然，你必须把它放在
doc ready
块中。它还不起作用，但让我向你展示整个代码，让你更容易理解：在行详细信息中，我对“show/hide details”img有问题。这里是固定的：jsfiddle.net/HEDvf/723，您必须单击“+”img来显示1.8+中不推荐使用的行detailsIsint toggle（）？还有更好的方法吗？@SankalpSingha不完全是你说的
。切换（fn，fn）
。我贴的是：