HTML Прокрутка таблицы с флажком

Question

Я создаю html таблицу прокрутки с галочками. Проблема в том, что часть прокрутки разбивается на две таблицы, поэтому моя функция javascript не будет работать. Итак, я ищу способ соединить их.

Моя HTML часть:

 <form action="manager_approve_timeclock.html" method="post" id="form1">
           <div>
              <div class="wrap">
                 <table class="head" border="1" cellpadding="5" align="center">
                    <caption><b>List of Time Clock Events</b></caption>
                    <tr>
                       <th><input type="checkbox" id="chkParent"></th>
                       <th>Name</th>
                       <th>Date</th>
                       <th>Time In</th>
                       <th>Time Out</th>
                       <th>Status</th>
                    </tr>
                 </table>
                 <div class="inner_table">
                    <table>
                       <c:forEach var="tm" items="${timeClocks}">
                          <tr>
                             <td><input type="checkbox" id="${tm.timeClockId}" value="${tm.timeClockId}" name="timeClockIds">
                             <td>${tm.name}</td>
                             <td>${tm.formattedDate}</td>
                             <td>${tm.timeIn}</td>
                             <td>${tm.timeOut}</td>
                             <td>${tm.status}</td>
                          </tr>
                       </c:forEach>
                    </table>
                 </div>
              </div>
           </div>
        </form>

Моя Javascript функция:

<script type='text/javascript'>
        $(document).ready(function() {
              $('#chkParent').click(function() {
                var isChecked = $(this).prop("checked");
                $('#tblData tr:has(td)').find('input[type="checkbox"]').prop('checked', isChecked);
              });

              $('#tblData tr:has(td)').find('input[type="checkbox"]').click(function() {
                var isChecked = $(this).prop("checked");
                var isHeaderChecked = $("#chkParent").prop("checked");
                if (isChecked == false && isHeaderChecked)
                  $("#chkParent").prop('checked', isChecked);
                else {
                  $('#tblData tr:has(td)').find('input[type="checkbox"]').each(function() {
                    if ($(this).prop("checked") == false)
                      isChecked = false;
                  });
                  console.log(isChecked);
                  $("#chkParent").prop('checked', isChecked);
                }
              });
            });

Есть мысли?