javascript - 如何在单个数据表列上启用 xeditable？

Question

我正在尝试使用xeditable在具有以下结构的数据表上

<table id="example">
    <thead>
        <tr>
          <th>ID</th>
          <th>Type</th>
        </tr>
    </thead>
    <tbody>
        {% for r in records %}
        <tr>
            <td><a href="{{ r.link }}">{{ r.id }}</a></td>
            <td><a href="#" pk-data="{{ r.id }}" data-type="select" data-value="{{ r.type.id }}">{{ r.type.name }}</a></td>
        </tr>
        {% endfor %}
    </tbody>
</table>

有几个示例行最终看起来像这样:

<tr>
    <td><a href="http://example.com">ABC-123</a></td>
    <td><a href="#" pk-data="ABC-123" data-type="select" data-value="5">Things</a></td>
</tr>
<tr>
    <td><a href="http://example.com">XYZ-890</a></td>
    <td><a href="#" pk-data="XYZ-890" data-type="select" data-value="5">Things</a></td>
</tr>

我想使用 xeditable 使第二列可编辑。我有代码块可以做到这一点

$.fn.editable.defaults.mode = 'inline';
$('#example.td a').editable({
    type: 'select',
    name: 'Type',
    title: 'Type',
    source: [
      {value: 0, text: 'Nothing'},
      {value: 1, text: 'Everything'},
      {value: 2, text: 'Something'},
      {value: 3, text: 'That Thing'},
      {value: 4, text: 'This Thing'},
      {value: 5, text: 'Things'}
    ]
});

这不起作用。我的控制台中没有出现错误。它只是没有做任何事情。没有弹出窗口，没有内联，什么都没有。

我怀疑这是我的 ('#example.td a') 的结果。我的 JavaScript 很生疏，但我相信这应该适用于这两列，对吗？如何使此选择仅应用于第二列？

我期待这样的东西(取自 Demos ，特别是选择，本地数组，自定义显示)

我提供了jsfiddle协助展示我的问题

Answer 1

一种方法可能是添加 class="second_td"到你的第二个<td>元素并将选择器更改为 ('#example .second_td a')

Here is a working fiddle ，我说你需要加上class="second_td"到你的第二个<td> (不是第二个 td 中的 <a> 标签