add a row to a specific table created dynamically by user

Question

I am creating a site to manipulate data on multiple tables that are created with jquery.... most tables will be added by the user when they are on the page.

I am also very new to jquery and javascript - so I may be missing something basic here.

I have been able to get buttons created along with the table headers and then added classes to both the table and the button. I would like to be able to add editable rows and columns to each table by clicking on the correlating button, however I cannot find a way to link the two together whether it is by class or some other means.

Here is the code that I have that adds the table:

$("button.agentPerson").on("click", function() {
  var $newAgent = $('input.agentPerson').val();

  if ($('input.agentPerson').val() !== "") {
    $("div.commissionInfo").append("<br/><br/><table><tr><th>Address</th><th>Contract Date</th><th>Production</th></tr><button>New Deal</button></table><br/>");

    $("tbody:last-child").addClass($newAgent);
    $("button:last-child").addClass($newAgent);
    $("select.addToThis").append($('<option>', {
      value: $newAgent,
      text: $newAgent,
    }));

  }
});

I have also on the page a dropdown which I would eventually want to be able to hide all tables beside the one chosen. I figure that will be simple once I figure out how to link the two together through classes.

Thank you. If you need any further code please let me know.

I just found the .closest and .parent methods, but I cannot get them to work either.

Here is my most recent attempt to get a button to append to a table.

$("body").on("click", "button", function(event) {
  var $theTable = $(this).closest("tbody");

  $theTable.append("<tr></tr><tr></tr><tr></tr>");
});

There's no `tbody` in your code. The button is outside of the table, so that even if the `tbody` exist in the table, calling `$(this).closest("tbody")` will take you nowhere. — Artur Filipiak, Mar 21 '15 at 23:19
have moved the button inside of the table and changed the "tbody" to "table" and still getting nothing. - @ArturFilipiak were those the only issues you saw? — Tom Mohr, Mar 21 '15 at 23:22

score 0 · Accepted Answer · edited May 23 '17 at 12:22

You could do this way:

Store current $newAgent into data-table attribute of a button;
Add current $newAgent class to the table;
Then you can target the table with a button by data-table attribute and class.

var $newAgent;
$(".addTable").click(function(){
  if ( $('input.agentPerson').val() !== "" && $('input.agentPerson').val() !== $newAgent) {
    $newAgent = $('input.agentPerson').val();
    $("div.commissionInfo").append("<br/><br/><table class='"+$newAgent+"'><thead><tr><th>Address</th><th>Contract Date</th><th>Production</th></tr></thead><tbody></tbody></table><br/><button data-table='"+$newAgent+"' class='appendRow'>New Deal</button>");

    $("select.addToThis").append($('<option>', {
      value: $newAgent,
      text: $newAgent,
    }));

  }else{
    // throw an error if the field is empty or isn't updated after last table
    // alert for demo:
    alert('please update field!');
  }
})

$("body").on("click", "button.appendRow", function(event) {
  var $theTable = $("table."+$(this).attr('data-table')+" tbody");
  $theTable.append("<tr><td>blah</td><td>blah</td><td>blah</td></tr>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class=agentPerson value="blah"/>
<button type="button" class="addTable">Add table</button>
<div class="commissionInfo"></div>

Explantion:

+ (Reference) in the example above is used to merge two strings togrther. Like 'Hello ' + 'world' will be equal to 'Hello world'
data-table (Reference) is just an attribute of an element and is not related to <table> elements (it can be data-something). E.g: data-something can be accessed by:
- $(element).data('something'); (it's more usefull in certain cases)
- $(element).attr('data-something'); (better to use in this case)

This is awesome. Thank you so much! just a couple questions: is the data-table attribute just another way to specify a table in HTML? also what is the function of the + symbol around $newAgent when you are putting it in the table class in the jquery. Thanks so much for your help. This will keep me moving forward! — Tom Mohr, Mar 21 '15 at 23:44

add a row to a specific table created dynamically by user

1 Answers1