Dynamically add new rows and new sub rows using jquery

Question

I am looking for a functionality in my user interface:

Add a new parent row (class="schedule") on focusout of the last column of the last parent row (class="schedule").
And also add new child rows (class="from_hour_row", class="to_hour_row", class="mw_row") in the last 3 columns in the same parent row (class="schedule").
Add new child rows (class="from_hour_row", class="to_hour_row", class="mw_row") in the last 3 columns in the same parent row (class="schedule") on focusout of the last child row (class="mw_row") of the last column without adding a new parent row if the current parent row is not the last one.

However, with my code I am only able to add new child rows and a new parent row on focusout of the last child row of the last column of the first parent row. Focusout of the last column of new parent row doesn't trigger any event. Always, it is the last child row of the last column of the first parent row that adds new child rows in the first row and a new parent row.

Attached a pic

form pic

Below is the html part

    <table class="bordered2" style="width: 900px; margin-top: 5px;" align="center">
  <thead>
    <tr>
      <th class="cntr">
        From Date
      </th>
      <th class="cntr">
        To Date
      </th>
      <th class="cntr">
        From Hours
      </th>
      <th class="cntr">
        To Hours
      </th>
      <th class="cntr">
        MW
      </th>
      <th class="cntr">
        MW-Hours
      </th>
    </tr>
  </thead>
  <tbody class="tbody">
    <tr class="schedule">
      <td>
        <input type="text" name="fromDate" class="fromDate" id="fromDate" />
      </td>
      <td>
        <input type="text" name="toDate" class="toDate" id="toDate" />
      </td>
      <td>
        <table class="from_hour" width="100%" cellspacing="0" cellpadding="0" bordercolor="#111111" border="0">
          <tr class="from_hour_row">
            <td>
              <input type="text" name="fromHour" class="fromHour" id="fromHour" size="10" />
            </td>
          </tr>
        </table>
      </td>
      <td>
        <table class="to_hour" width="100%" cellspacing="0" cellpadding="0" bordercolor="#111111" border="0">
          <tr class="to_hour_row">
            <td>
              <input type="text" name="toHour" class="toHour" id="toHour" size="10" />
            </td>
          </tr>
        </table>
      </td>
      <td>
        <table class="mw" width="100%" cellspacing="0" cellpadding="0" bordercolor="#111111" border="0">
          <tr class="mw_row">
            <td>
              <input type="text" name="mw" class="mw" id="mw" value="0.00" size="10" />
            </td>
          </tr>
        </table>
      </td>
      <td>
        <table class="mw_hr" width="100%" cellspacing="0" cellpadding="0" bordercolor="#111111" border="0">
          <tr class="mw_hr_row">
            <td>
              <input type="text" name="mwhrs" class="mwhrs" id="mwhrs" />
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr class="sumtr" id="sumtr">
      <td id="sumtd" colspan="5">
        Total Mw-Hr : 
      </td>
      <td name="totalmwhrs" class="totalmwhrs" id="totalmwhrs">
        0
      </td>
    </tr>
  </tbody>
</table>

Below is the jquery part

    $('table.mw').on('focusout', 'tr.mw_row:last td input',function(){
        $(this).parent().parent().parent().parent().parent().parent().find('table.from_hour tr.from_hour_row').last().after('<tr class="from_hour_row"><td><input type="text" name="fromHour" class="fromHour" id="fromHour" size="10"/></td></tr>');
        $(this).parent().parent().parent().parent().parent().parent().find('table.to_hour tr.to_hour_row').last().after('<tr class="to_hour_row"><td><input type="text" name="toHour" class="toHour" id="toHour" size="10"/></td></tr>');
        $(this).parent().parent().parent().parent().parent().parent().find('table.mw tr.mw_row').last().after('<tr class="mw_row"><td><input type="text" name="mw" class="mw" id="mw" value="0.00" size="10"/></td></tr>');
        $(this).parent().parent().parent().parent().parent().parent().find('table.mw_hr tr.mw_hr_row').last().after('<tr class="mw_hr_row"><td><input type="text" name="mwhrs" class="mwhrs" id="mwhrs" value="0.00" size="10"/></td></tr>');
    });

    $('table.mw:last').on('focusout', 'tr.mw_row:last td input',function(){
                    $(this).parent().parent().parent().parent().parent().parent().parent().find('tr.schedule').last().after('<tr class="schedule"><td><input type="text" name="fromDate" class="fromDate"/></td><td><input type="text" name="toDate" class="toDate"/></td><td><table class="from_hour" width="100%" cellspacing="0" cellpadding="0" bordercolor="#111111" border="0"><tr class="from_hour_row"><td><input type="text" name="fromHour" class="fromHour" size="10"/></td></tr></table></td><td><table class="to_hour" width="100%" cellspacing="0" cellpadding="0" bordercolor="#111111" border="0"><tr class="to_hour_row"><td><input type="text" name="toHour" class="toHour" size="10" /></td></tr></table></td><td><table class="mw" width="100%" cellspacing="0" cellpadding="0" bordercolor="#111111" border="0"><tr class="mw_row"><td><input type="text" name="mw" class="mw" value="0.00" size="10"/></td></tr></table></td><td><table class="mw_hr" width="100%" cellspacing="0" cellpadding="0" bordercolor="#111111" border="0"><tr class="mw_hr_row"><td><input type="text" name="mwhrs" class="mwhrs" /></td></tr></table></td></tr>');
    });

You might look into the parents() method as well, .parent().parent().parent().parent().parent().parent() needs some loving. — helion3
– helion3, Commented Oct 16, 2014 at 5:50
@helion3 As I debug, I see the newly added parent row and the child row are not being accessed through their class names because the events are not triggered on focusout of the newly added rows (new parent row and the new child row in it). — user_abh
– user_abh, Commented Oct 16, 2014 at 6:21
You can't listen for events on newly added DOM elements, that's why the accepted answer uses delegation. — helion3
– helion3, Commented Oct 16, 2014 at 15:38

Actimele · Accepted Answer · 2014-10-16 06:49:23Z

First CSS selector doesn't have :last, only :last-child
Second, stop use parent() hell look to .closest().
Third, event not fire because your document doesn't know about events for new DOM elemets, you should use $(document).on("click", ".selector", function() {});

JS code for your purpose:

$(document).on('focusout', 'tr.mw_row:last-child td input',function(){
        $(this).closest("tr.schedule").find('table.from_hour tr.from_hour_row').last().after('<tr class="from_hour_row"><td><input type="text" name="fromHour" class="fromHour" id="fromHour" size="10"/></td></tr>');
        $(this).closest("tr.schedule").find('table.to_hour tr.to_hour_row').last().after('<tr class="to_hour_row"><td><input type="text" name="toHour" class="toHour" id="toHour" size="10"/></td></tr>');
        $(this).closest("tr.schedule").find('table.mw tr.mw_row').last().after('<tr class="mw_row"><td><input type="text" name="mw" class="mw" id="mw" value="0.00" size="10"/></td></tr>');
        $(this).closest("tr.schedule").find('table.mw_hr tr.mw_hr_row').last().after('<tr class="mw_hr_row"><td><input type="text" name="mwhrs" class="mwhrs" id="mwhrs" value="0.00" size="10"/></td></tr>');
    });

$(document).on('focusout', 'tr.mw_hr_row td:last-child input',function(){
                $(this).closest("tbody.tbody").append('<tr class="schedule"><td><input type="text" name="fromDate" class="fromDate"/></td><td><input type="text" name="toDate" class="toDate"/></td><td><table class="from_hour" width="100%" cellspacing="0" cellpadding="0" bordercolor="#111111" border="0"><tr class="from_hour_row"><td><input type="text" name="fromHour" class="fromHour" size="10"/></td></tr></table></td><td><table class="to_hour" width="100%" cellspacing="0" cellpadding="0" bordercolor="#111111" border="0"><tr class="to_hour_row"><td><input type="text" name="toHour" class="toHour" size="10" /></td></tr></table></td><td><table class="mw" width="100%" cellspacing="0" cellpadding="0" bordercolor="#111111" border="0"><tr class="mw_row"><td><input type="text" name="mw" class="mw" value="0.00" size="10"/></td></tr></table></td><td><table class="mw_hr" width="100%" cellspacing="0" cellpadding="0" bordercolor="#111111" border="0"><tr class="mw_hr_row"><td><input type="text" name="mwhrs" class="mwhrs" /></td></tr></table></td></tr>');
        });

Thanx a ton. Did a few minor changes to your solution to fit my requirement and it worked well.
to that i would like to add one more change, use deep clone .clone(true) and copy elements instead of writing html directly in js

Collectives™ on Stack Overflow

Dynamically add new rows and new sub rows using jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related