Question

我正在寻找用户界面中的功能：

在最后一个父行（class =“schedule”）的最后一列的 focusout 上添加一个新的父行（class =“schedule”）。
并在同一父行（class =“schedule”）的最后3列中添加新子行（class =“from_hour_row”，class =“to_hour_row”，class =“mw_row”）。
在 focusout上的同一父行（class =“schedule”）的最后3列中添加新子行（class =“from_hour_row”，class =“to_hour_row”，class =“mw_row”）最后一列的最后一个子行（class =“mw_row”），如果当前父行不是最后一行，则不添加新的父行。

但是，使用我的代码，我只能在第一个父行的最后一列的最后一个子行的 focusout 上添加新的子行和一个新的父行。新父行的最后一列的 Focusout 不会触发任何事件。始终，它是第一个父行的最后一列的最后一个子行，它在第一行和新的父行中添加了新的子行。

附上图片

form pic

以下是html部分

    <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>

以下是jquery部分

    $('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>');
    });

Answer 1

第一个CSS选择器没有：最后一个，只有:last-child
其次，停止使用parent（）hell look to。closest()。
第三，因为你的文件不知道新DOM元素的事件，事件不会激发，你应该使用$（文件）.on（＆＃34;点击＆＃34;，＆＃34; .selector＆＃ 34;，function（）{}）;

JS代码用于您的目的：

$(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>');
        });

使用jquery动态添加新行和新子行

1 个答案: