Answers.Body: <p>As far as I know, I don't think that there is any built-in way to replicate the table fieldtype functionality on the front-end (i.e. with 'add row','remove row', etc.) I think that you would have to create your own buttons and then manipulate the dom using javascript.</p>
  
  <p>In your template you would want something like this:</p>
  
  <pre><code>Provider Credentials
  &lt;table class="js-providerCredentials"&gt;
      {% for row in currentUser.providerCredentials %}
          &lt;tr id="accreditingInstitution-{{ loop.index }}"&gt;
              &lt;td&gt;Institution&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" class="name-field" name="fields[providerCredentials][{{ loop.index }}][col1]" value="{{ row.accreditingInstitution }}"&gt;&lt;/td&gt;
          &lt;/tr&gt;
      {% endfor %}
  &lt;/table&gt;
  &lt;a class="button add-row" role="button"&gt;Add row&lt;/a&gt;
  </code></pre>
  
  <p>And in your javascript file:</p>
  
  <pre><code>$('.add-row').on('click', function(event){
      $(this).preventDefault();
  
      var rowCount = $('.js-providerCredentials').children('tr').length,
          newRow = '&lt;tr id="accreditingInstitution-' + (rowCount+1) + '"&gt;&lt;td&gt;Institution&lt;/td&gt;&lt;td&gt;&lt;input type="text" class="name-field" name="fields[providerCredentials][' + (rowCount+1) + '][col1]" value=""&gt;&lt;/td&gt;&lt;/tr&gt;';
  
      $('.js-providerCredentials').append(newRow);
  })
  </code></pre>
  
  <p>Not sure how your table is set up exactly, but the principle should be the same. For another example of how to format the dom for form submission see the answer to this question,  <a href="https://craftcms.stackexchange.com/questions/4860/edit-a-table-field-type-from-the-front-end">editing a table field type from the front end</a>.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-01-05T22:44:39.890Z
Answers.Text: Thanks for the answer, Douglas. I've got JS set up to add rows, but had trouble getting the initial empty fields in there. The loop.index may be the key to getting all working.
Answers.UserDisplayName: Matt Steele
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-01-05T22:50:55.160Z
Answers.Text: Great! fyi.. I noticed another error: 'rowCount' should be 'rowCount+1' of course. I updated the answer.
Answers.UserDisplayName: Douglas McDonald
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-01-05T21:40:57.953Z
Answers.LastActivityDate: 2015-01-05T22:49:54.810Z
Answers.LastEditDate: 2017-04-13T12:51:00.303Z
Answers.UserDisplayName: Douglas McDonald
Body: <p>I'm building out a front end form that users will use to fill out with their information. Naturally, when a user first signs up, their profile fields are empty and a blank space appears for them to add in their info later.</p>
  
  <p>This works well on all fields on my form <em>except</em> the table field type. If nothing has been entered the loop will simply display nothing. I've been reading through <a href="https://craftcms.stackexchange.com/questions/824/test-for-empty-field">this</a> answer, but so far checking <code>is empty</code> or <code>|length</code> is not working on my form.</p>
  
  <p>Here's my current loop, which works great as long as the info is entered through the CP. How do I get an empty table field type to display on the front-end so a user can update their profile?</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td&gt;Institution&lt;/td&gt;
      {% for row in currentUser.providerCredentials %}
        &lt;td&gt;&lt;input type="text" id="accreditingInstitution" class="name-field" name="fields[providerCredentials][0][col1]" value="{{row.accreditingInstitution}}"&gt;&lt;/td&gt;
      {% endfor %}
  &lt;/tr&gt;
  </code></pre>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-01-05T19:44:22.760Z
Comments.Text: When you say 'row fieldtype', do you mean the table fieldtype?
Comments.UserDisplayName: Brad Bell
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-01-05T19:47:52.493Z
Comments.Text: Yep, I meant the table field type. I kept staring at 'row' in the code so in my mind I changed it to the 'row field type'. I updated the question. Thanks, Brad.
Comments.UserDisplayName: Matt Steele
Tags: <form><fieldtypes>
Title: How do I get an empty table field type to display on the front-end so a user can update their profile?
ThreadText: # How do I get an empty table field type to display on the front-end so a user can update their profile?
  
  (Asked by: username_0 on 2015-01-05)
  
  I'm building out a front end form that users will use to fill out with their information. Naturally, when a user first signs up, their profile fields are empty and a blank space appears for them to add in their info later.
  
  This works well on all fields on my form *except* the table field type. If nothing has been entered the loop will simply display nothing. I've been reading through [this](https://craftcms.stackexchange.com/questions/824/test-for-empty-field) answer, but so far checking `is empty` or `|length` is not working on my form.
  
  Here's my current loop, which works great as long as the info is entered through the CP. How do I get an empty table field type to display on the front-end so a user can update their profile?
  
  ```
  <tr>
      <td>Institution</td>
      {% for row in currentUser.providerCredentials %}
        <td><input type="text" id="accreditingInstitution" class="name-field" name="fields[providerCredentials][0][col1]" value="{{row.accreditingInstitution}}"></td>
      {% endfor %}
  </tr>
  
  ```
  
  **Tags:** form, fieldtypes
  
  > **Comments:**
  > **username_1**: When you say 'row fieldtype', do you mean the table fieldtype?  
  > **username_0**: Yep, I meant the table field type. I kept staring at 'row' in the code so in my mind I changed it to the 'row field type'. I updated the question. Thanks, username_1.  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_2 on 2015-01-05. Score: 1 | Accepted answer
  
  As far as I know, I don't think that there is any built-in way to replicate the table fieldtype functionality on the front-end (i.e. with 'add row','remove row', etc.) I think that you would have to create your own buttons and then manipulate the dom using javascript.
  
  In your template you would want something like this:
  
  ```
  Provider Credentials
  <table class="js-providerCredentials">
      {% for row in currentUser.providerCredentials %}
          <tr id="accreditingInstitution-{{ loop.index }}">
              <td>Institution</td>
              <td><input type="text" class="name-field" name="fields[providerCredentials][{{ loop.index }}][col1]" value="{{ row.accreditingInstitution }}"></td>
          </tr>
      {% endfor %}
  </table>
  <a class="button add-row" role="button">Add row</a>
  
  ```
  
  And in your javascript file:
  
  ```
  $('.add-row').on('click', function(event){
      $(this).preventDefault();
  
      var rowCount = $('.js-providerCredentials').children('tr').length,
          newRow = '<tr id="accreditingInstitution-' + (rowCount+1) + '"><td>Institution</td><td><input type="text" class="name-field" name="fields[providerCredentials][' + (rowCount+1) + '][col1]" value=""></td></tr>';
  
      $('.js-providerCredentials').append(newRow);
  })
  
  ```
  
  Not sure how your table is set up exactly, but the principle should be the same. For another example of how to format the dom for form submission see the answer to this question, [editing a table field type from the front end](https://craftcms.stackexchange.com/questions/4860/edit-a-table-field-type-from-the-front-end).
  
  > **Comments:**
  > **username_0**: Thanks for the answer, username_2. I've got JS set up to add rows, but had trouble getting the initial empty fields in there. The loop.index may be the key to getting all working.  
  > **username_2**: Great! fyi.. I noticed another error: 'rowCount' should be 'rowCount+1' of course. I updated the answer.  
  
  ---
  
  