How can I enable xeditable on a single datatable column?

Question

I am attempting to use xeditable on a datatable with the following structure

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

With a sample couple rows that end up looking like this:

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

I want to make the second column editable using xeditable. I have the block of code to do so

$.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'}
    ]
});

This does not work. I do not get errors in my console. It just doesn't do anything. No popups, no inline, nothing.

I suspect that it is a result of my ('#example.td a'). My Javascript is rusty, but I believe that should apply to both columns, correct? How can I make this selection apply to only the second column?

I am expecting something like this (taken from the Demos, specifically Select, local array, custom display)

I have provided a jsfiddle to assist in showing my problem

Answer 1

One way could be to add class="second_td" to your second <td> element and change you selector to ('#example .second_td a')

Here is a working fiddle , I said that you need to add the class="second_td" to your second <td> (not to the <a> tag in your second td