Dynamically insert/remove table rows (including how to give ID's to added rows)

Question

I'm trying to implement a dynamically growing/shrinking table as in the picture. I know I need to use the insertRow() function, but I'm confused about how to dynamically give ID's to the rows. I need to be able to disable the end date input field if the checkbox is checked (that's why the need to give ID's). I need to be able to insert rows and delete rows. I'm fairly experienced in programming concepts but new to JavaScript and web development in general. If anyone could point me to sample code or explain if there is another efficient way of doing it, I'd greatly appreciate it.

https://i.stack.imgur.com/HEYgL.jpg

Answer 1

An example whitout id, working for each line control, like you screenshot (id's are just a way among others...)

You can't have multiple identical id's, then Assuming your action button's are called by their respective classname, ".add" and ".del"

For Removing

$(".del").on("click", function()
{
    // removing the line of element clicked
    $(this).parents("tr").remove();
});

For a New line

$(".add").on("click", function()
{
    var line = $(this).parents("tr"); // get the line of element clicked
    var lineOffset = line.index(); // get the offset position of this line
    // and using css selector, you can simply add line after another
    $("table tr:eq("+lineOffset+")").after(line.clone(true));
    // line.clone(true) is an example, but you can put directly your html like "<tr>.... what you want</tr>"
});

Table test

<table>
    <tr id="a_0"><td>test0</td><td><span class="del">[X]</span><span class="add">[o]</span></td></tr>
    <tr id="a_1"><td>test1</td><td><span class="del">[X]</span><span class="add">[o]</span></td></tr>
    <tr id="a_2"><td>test2</td><td><span class="del">[X]</span><span class="add">[o]</span></td></tr>
</table>

(function() {

  $(".del").on("click", function() {
    // removing the line of element clicked
    $(this).parents("tr").remove();
  });

  $(".add").on("click", function() {
    var line = $(this).parents("tr"); // get the line of element clicked
    var lineOffset = line.index(); // get the offset position of this line
    // and using css selector, you can simply add line after another
    $("table tr:eq(" + lineOffset + ")").after(line.clone(true));
    // line.clone(true) is an example, but you can put directly your html like "<tr>.... what you want</tr>"
  });

})()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <tr id="a_0">
    <td>test0</td>
    <td><span class="del">[X]</span><span class="add">[o]</span>
    </td>
  </tr>
  <tr id="a_1">
    <td>test1</td>
    <td><span class="del">[X]</span><span class="add">[o]</span>
    </td>
  </tr>
  <tr id="a_2">
    <td>test2</td>
    <td><span class="del">[X]</span><span class="add">[o]</span>
    </td>
  </tr>
</table>

However, you can see in my example, the ID's beginning by a_* are not used (yes, it's not necessary and relative as your case) And another way to make that is to use the jquery method .index() to get the line offset clicked and.. remove or copy it!

Note :

If you realy need to use a line ID, well, you can proceed by using css selectors like that:

$("tr[id^='a_']")

IF EMPTIED TABLE

$(".del").on("click", function()
{
    // removing the line of element clicked
    $(this).parents("tr").remove();
    if($("table tr").length == 1) // the only one remaining is the hidden_control (if you doesn't use a external button but a row)
       $("#hidden_control").show(); // or .css("display", "block");
});

$("#hidden_control").on("click", function()
{
    $("table").append("<tr><td>...</tr>"); // add a new first line
    $(this).hide(); // and hide it directly until next reinit
});

// hidden button at top (or bottom) of table (not in the table)
<input type="button" id="hidden_control" value="Refill new data">

// or, hidden row solution (where colspan=6 depend the number of cell you have: 
<tr id='hidden_control'><td colspan='6'><button>Refill new data</button></td></tr>

   // CSS class for hidden_control
   #hidden_control
   { display: none; }

Documentation :

Go on https://api.jquery.com/, and search for "parents", "after", "remove", "append", "html", "index"

Answer 2

Wrap each row with a class or row.

if you want to add:

 var form="<div> <input type='text'></div>";
 $(document).on('click', ".add", function(){
  $(form).insertAfter($(this).closest("#fields"));
 });    

delete:

$(document).on('click', ".remove", function(){
 $(this).closest('div').remove();
});

jsFiddle demo

Answer 3

You don't need ID's for that. The JavaScript handler for the checkbox can locate the End Date field by navigating the DOM tree. Starting at the checkbox, walk up the DOM tree (e.g. parent()) to find the cell (<TD>), then walking the siblings (next() twice), and down to the input field (e.g. find('input')).

As for adding a new row, you can follow the advice of this answer:

$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

And you remove a row by calling remove() on the <TR>.