如何在表行中使用引导程序 x-editable？答案

【问题标题】：How to use bootstraps x-editable in table rows?如何在表行中使用引导程序 x-editable？
【发布时间】：2013-11-03 07:58:37
【问题描述】：

我想使用 bootstraps X-editable 插件。我在我的表中检索服务器端数据，我想在线编辑它们。如我所见，建议使用 X-editable 与 id 一起使用。是否可以处理多个数据？

文档：

<a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a>

$(document).ready(function() {
    $('#username').editable();
});

如果我有更多用户名怎么办？

【问题讨论】：

您不需要使用元素的 id 来初始化 x-editable。只需在您的a 标签中设置class="username"，然后使用$('.username').editable();
你是对的我做了一个测试jsfiddle.net/lgtsfiddler/FgqH6/1

标签： jquery twitter-bootstrap x-editable

【解决方案1】：

<a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a>

改成

<a href="#" class="username">superuser</a>

还有

$(document).ready(function() {
    $('#username').editable();
});

改成

$(document).ready(function() {
    $('.username').editable();
});

【讨论】：

谢谢。您也应该在 Laravel 应用程序中使用此功能

【解决方案2】：

如果您有更多用户名，最好更改该名称。您可以设置可编辑的任何您想要的元素。只需制作一个选择器即可。您可以使用 data-* 属性来做到这一点..

伟大的，雨果·佩德罗萨

【讨论】：

【解决方案3】：

使用 id 作为<table>：

<table id="user" class="table table-striped">
<tr><td>
<a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a>
</td></tr>
</table>

$(document).ready(function() {
    $('#user a').editable();
});

【讨论】：

这个不行，锚链接需要唯一，所以调用editable()时必须用class代替id；