title: Dynamic table - auto-show
body: <p>I have the following code where I edit the field of a row in a table, but I want it to be more Dynamic, that is, when editing a field it jumps to the next field where I will edit. I have a success function where I should jump to the next field to edit what the Item would be, but I do not know why it does not work.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#table').editable({
          container: 'body',
          selector: 'td.task',
          title: 'task',
          type: "POST",
          showbuttons: false,
           type: 'text',
          validate: function(value) {
              if ($.trim(value) == '') {
                  return 'Empty!';
              }
          },  
          success: function(response) {
       //WITH THIS CODE I COULD JUMP BUT THE LIST GIVE A ERROR AND CREATE A NEW TR WITH TD
             $(this).parent().find(".Item").click();
          }
      });
      var ITEM = [];
      $.each({
          "Item1": "Item1",
          "Item2": "Item2",
          "Item3": "Item3",
          "Item4": "Item4"
      }, function(k, v) {
          ITEM.push({
              value: k,
              text: v
          });
      });
      
      $('#table').editable({
          container: 'body',
          selector: 'td.Item',
          title: 'Item',
          type: "POST",
          showbuttons: false,
          source: ITEM,
          validate: function(value) {
              if ($.trim(value) == '') {
                  return 'Empty!';
              }
          }
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;script src="http://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt; 
  &lt;script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/&gt;
  
  &lt;table id="table" class="table table-bordered"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Id&lt;/th&gt;
        &lt;th&gt;Task&lt;/th&gt;
        &lt;th&gt;Item&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
    &lt;tr&gt;
    &lt;td&gt;1&lt;/td&gt;
    &lt;td data-name="task" class="task" data-type="text"&gt;001&lt;/td&gt;
    &lt;td data-name="Item" class="Item" data-type="select"&gt;Item2&lt;/td&gt;
    &lt;/tr&gt;
      &lt;tr&gt;
    &lt;td&gt;2&lt;/td&gt;
    &lt;td data-name="task" class="task" data-type="text"&gt;002&lt;/td&gt;
    &lt;td data-name="Item" class="Item" data-type="select"&gt;Item1&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have seen an example on the next page. <a href="https://vitalets.github.io/x-editable/demo-bs3.html" rel="nofollow noreferrer">link</a> you must press the checkbox auto-open next field at the moment of editing this jump to the next field to edit. I would like something like that, I hope I have explained myself well.</p>
  
  <p>UPDATE: I add a line of code in my success function but the select give a error <code>Error when loading list</code> and in the table create a new <code>&lt;tr&gt; with &lt;td&gt;</code></p>