Appending data to section

Question

I have a table that populates with contents from a database. A user should be able to add as many new entries as they want to the table (let's ignore the 'save' button for now).

I attempt to add new rows to the table with

$("#businesscategorytable tfoot").append(addNewRow);

where addNewRow is formatted like the other rows in the table. However, this procedure does not work. What is even more confusing is that a similar module was used in a separate page of the project I'm working on and everything functions properly.

Here's a Stack Snippet that provides a bare-bones mock-up of what I'm working with:

    $(function() {
      //Remove Row Function for Business Category Tables
      $("table[id='businesscategorytable']").on("click", "input[id='btnDeleteRow']", function() {
        $(this).closest('tr').hide(); //hiding rows instead of removing so we only commit on 'Save'
      });
      //End Remove Row Function for Tables

      //Add Row Function for Business Category Tables
      $("input[id='btnAddBusinessRow']").click(function() {
        var addNewRow = "<tr><td style=\"display: none\"><input type=\"hidden\" class=\"hdnBusinessCatId\" id=\"hdnBusinessCatId" + idCount + "\" />" +
          "<td><input type=\"text\" id=\"businessCat" + idCount + "\" size=\"12\"></td>" +
          "<td><input type=\"text\" id=\"businessColor" + idCount + "\" size=\"8\" value=\"$\"></td>" +
          "<td><input type=\"button\" id=\"btnDeleteRow\" value=\"Delete\"\"></td>" +
          "</tr>";

        $("#businesscategorytable tfoot").append(addNewRow);
        idCount++;
      });
      //End Add Row Function
    });

<table border="1" id="businesscategorytable">
  <thead>
    <tr style="color:white;background-color:darkgray">
      <th>Category Name</th>
      <th>Color on Map</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="display: none">
        <input type="hidden" class="hdnBusinessCatId" id="0" />
      </td>
      <td>
        <input type="text" id="txtCategoryName0" size="12" value="0">
      </td>
      <td>
        <input type="text" id="txtCategoryId0" size="8" value="Red">
      </td>
      <td>
        <input type="button" id="btnDeleteRow" value="Delete">
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td style="display: none">
        <input type="hidden" class="hdnBusinessCatId" id="hdnBusinessCatId0" />
      </td>
      <td>
        <input type="text" id="businessCat0" size="12" />
      </td>
      <td>
        <input type="text" id="businessColor0" value="$" size="8" />
      </td>
      <td>
        <input type="button" id="btnDeleteRow" value="Delete" />
      </td>
    </tr>
  </tfoot>
</table>
<input type="button" id="btnAddBusinessRow" value="Add" />

Any ideas as to why this may not be working?

How do you know its not being added - the new row your adding is styled as `display:none:` so it won't be visible — , Apr 04 '16 at 21:56
That's only for the first in the row. I keep that hidden as a way to perform operations on new cells easily. The rest of the declarations are not set to hidden. — S Mayer, Apr 04 '16 at 22:01
Does your console print any errors? Perhaps an 'idCount is not defined'? — Denat Hoxha, Apr 04 '16 at 22:09
That's what I got on a JS Bin when I tried it it seems to work as soon as you define it. — John, Apr 04 '16 at 22:12
[This fiddle](https://jsfiddle.net/Lh186nb3/) shows it works fine (assuming your have declared `idCount`). But you do realize that your code wont bind to anything when you submit your form and there is no way to get the data. If you do want to do this, refer the answers [here](http://stackoverflow.com/questions/29161481/post-a-form-array-without-successful/29161796#29161796) and [here](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) — , Apr 05 '16 at 04:42
@StephenMuecke thanks for the feedback and links! I am aware of the lack of save functionality, I just wanted to provide as simple a problem space to work in. — S Mayer, Apr 05 '16 at 18:09

score 0 · Accepted Answer · answered Apr 04 '16 at 22:12

If you check your console you can see that idCount is undefined you need to declare idCount as a variable somewhere. I did that and it seemed to work how you declare idCount is up to you but it should definitley not conflict with the current id's you set it up with. Here's a JS Bin of that. I just added var idCount=1 before the click handler. It probably worked on the other page because idCount was declared there.

Appending data to section

1 Answers1