Объединить строки таблицы с JQuery - PullRequest
Новая
       8

Объединить строки таблицы с JQuery

0 голосов
/ 10 ноября 2018

У меня есть таблица с одинаковыми значениями для каждого человека, поэтому мне нужно объединить эти строки для этого человека с одинаковыми значениями. В некоторых случаях все строки с одинаковым значением объединяются, но они повторяются с одинаковыми значениями. В некоторых других случаях курсы с одинаковыми именами объединяются, и это неправильно, как я упоминал ранее, должны объединяться только одинаковые значения для одного человека, (извините за мой плохой английский, не знаю, как объяснить это, надеюсь, фрагмент покажет вам достаточно) Любое решение для этого? 

function groupTable($rows, startIndex, total) {
  if (total === 0) {
    return;
  }
  var i, currentIndex = startIndex,
    count = 1,
    lst = [];
  var tds = $rows.find('td:eq(' + currentIndex + ')');
  var ctrl = $(tds[0]);
  lst.push($rows[0]);
  for (i = 1; i <= tds.length; i++) {
    if (ctrl.attr("id") == $(tds[i]).attr("id")) {
      count++;
      $(tds[i]).addClass('deleted');
      lst.push($rows[i]);

    } else {
      if (count > 1) {
        ctrl.attr('rowspan', count);
        groupTable($(lst), startIndex + 1, total - 1)
      }
      count = 1;
      lst = [];
      ctrl = $(tds[i]);
      lst.push($rows[i]);
    }
  }
}
groupTable($('#myTable tr:has(td)'), 0, 14);
$('#myTable .deleted').remove();
<table class="table table-striped border-top table-bordered" id="myTable">
  <thead>
    <tr id="th1" style="background:#d3d3d3 ;">
      <th>#</th>
      <th>Grade</th>
      <th>Teacher</th>
      <th>Curse</th>
      <th colspan="3">Morning</th>
      <th colspan="3">Evening</th>
      <th colspan="2" style="font-size: 12px;">Weekly hour</th>

      <th>sum</th>
      <th>-</th>
    </tr>
    <tr id="th2">
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th>theory</th>
      <th>Practical</th>
      <th>free</th>
      <th>theory</th>
      <th>Practical</th>
      <th>free</th>
      <th>Morning</th>
      <th>Evening</th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody id="details_view">
    <tr id="p">
      <td id="id7" class "ids"="" data-id="ids">1</td>
      <td id="prof7">Mr</td>
      <td id="prof7">John Doe</td>
      <td id="prof7" style="font-size: 12px;">Electric</td>
      <td id="prof7" data-time="morning_theory" data-crs="Electric" data-prof="John Doe">0</td>
      <td id="prof7" data-time="morning_practical" data-crs="Electric" data-prof="John Doe">18</td>
      <td id="prof7" data-time="morning_free" data-crs="Electric" data-prof="John Doe">12</td>
      <td id="prof7" data-time="evening_theory" data-crs="Electric" data-prof="John Doe">0</td>
      <td id="prof7" data-time="evening_practical" data-crs="Electric" data-prof="John Doe">0</td>
      <td id="prof7" data-time="evening_free" data-crs="Electric" data-prof="John Doe">0</td>
      <td id="sob7" style="background:#d3d3d3 ;">30</td>
      <td id="asr7" style="background:#d3d3d3 ;">0</td>
      <td id="prof7">30</td>
      <td id="prof7" style="width: 160px;"></td>
    </tr>
    <tr id="p">
      <td id="id7" class "ids"="" data-id="ids">2</td>
      <td id="prof7">Mr</td>
      <td id="prof7">John Doe</td>
      <td id="prof7" style="font-size: 12px;">course2</td>
      <td id="prof7" data-time="morning_theory" data-crs="course2" data-prof="John Doe">0</td>
      <td id="prof7" data-time="morning_practical" data-crs="course2" data-prof="John Doe">18</td>
      <td id="prof7" data-time="morning_free" data-crs="course2" data-prof="John Doe">12</td>
      <td id="prof7" data-time="evening_theory" data-crs="course2" data-prof="John Doe">0</td>
      <td id="prof7" data-time="evening_practical" data-crs="course2" data-prof="John Doe">0</td>
      <td id="prof7" data-time="evening_free" data-crs="course2" data-prof="John Doe">0</td>
      <td id="sob7" style="background:#d3d3d3 ;">30</td>
      <td id="asr7" style="background:#d3d3d3 ;">0</td>
      <td id="prof7">30</td>
      <td id="prof7" style="width: 160px;"></td>
    </tr>
    <tr id="p">
      <td id="id7" class "ids"="" data-id="ids">3</td>
      <td id="prof7">Mr</td>
      <td id="prof7">John Doe</td>
      <td id="prof7" style="font-size: 12px;">course2</td>
      <td id="prof7" data-time="morning_theory" data-crs="course2" data-prof="John Doe">0</td>
      <td id="prof7" data-time="morning_practical" data-crs="course2" data-prof="John Doe">18</td>
      <td id="prof7" data-time="morning_free" data-crs="course2" data-prof="John Doe">12</td>
      <td id="prof7" data-time="evening_theory" data-crs="course2" data-prof="John Doe">0</td>
      <td id="prof7" data-time="evening_practical" data-crs="course2" data-prof="John Doe">0</td>
      <td id="prof7" data-time="evening_free" data-crs="course2" data-prof="John Doe">0</td>
      <td id="sob7" style="background:#d3d3d3 ;">30</td>
      <td id="asr7" style="background:#d3d3d3 ;">0</td>
      <td id="prof7">۳۰</td>
      <td id="prof7" style="width: 160px;"></td>
    </tr>
    <tr id="p">
      <td id="id30" class "ids"="" data-id="ids">4</td>
      <td id="prof30">Mr</td>
      <td id="prof30">Robert Anderson</td>
      <td id="prof12" style="font-size: 12px;">Course2 </td>
      <td id="prof12" data-time="morning_theory" data-crs="Course2" data-prof="Robert Anderson">0</td>
      <td id="prof12" data-time="morning_practical" data-crs="Course2" data-prof="Robert Anderson">0</td>
      <td id="prof12" data-time="morning_free" data-crs="Course2" data-prof="Robert Anderson">0</td>
      <td id="prof12" data-time="evening_theory" data-crs="Course2" data-prof="Robert Anderson">0</td>
      <td id="prof12" data-time="evening_practical" data-crs="Course2" data-prof="Robert Anderson">6</td>
      <td id="prof12" data-time="evening_free" data-crs="Course2" data-prof="Robert Anderson">0</td>
      <td id="sob12" style="background:#d3d3d3 ;">0</td>
      <td id="asr12" style="background:#d3d3d3 ;">6</td>
      <td id="prof12">6</td>
      <td id="prof12" style="width: 160px;"></td>
    </tr>
    <tr id="p">
      <td id="id6" class "ids"="" data-id="ids">5</td>
      <td id="prof6">Mr</td>
      <td id="prof6">Jack Hulk</td>
      <td id="prof5" style="font-size: 12px;">Course3</td>
      <td id="prof5" data-time="morning_theory" data-crs="Course3" data-prof="Jack Hulk">8</td>
      <td id="prof5" data-time="morning_practical" data-crs="Course3" data-prof="Jack Hulk">12</td>
      <td id="prof5" data-time="morning_free" data-crs="Course3" data-prof="Jack Hulk">2</td>
      <td id="prof5" data-time="evening_theory" data-crs="Course3" data-prof="Jack Hulk">2</td>
      <td id="prof5" data-time="evening_practical" data-crs="Course3" data-prof="Jack Hulk">4</td>
      <td id="prof5" data-time="evening_free" data-crs="Course3" data-prof="Jack Hulk">18</td>
      <td id="sob5" style="background:#d3d3d3 ;">22</td>
      <td id="asr5" style="background:#d3d3d3 ;">24</td>
      <td id="prof5">46</td>
      <td id="prof5" style="width: 160px;"></td>
    </tr>
    <tr id="p">
      <td id="id6" class "ids"="" data-id="ids">6</td>
      <td id="prof6">Mr</td>
      <td id="prof6">Jack Hulk</td>
      <td id="prof5" style="font-size: 12px;">Course3</td>
      <td id="prof5" data-time="morning_theory" data-crs="Course3" data-prof="Jack Hulk">8</td>
      <td id="prof5" data-time="morning_practical" data-crs="Course3" data-prof="Jack Hulk">12</td>
      <td id="prof5" data-time="morning_free" data-crs="Course3" data-prof="Jack Hulk">2</td>
      <td id="prof5" data-time="evening_theory" data-crs="Course3" data-prof="Jack Hulk">2</td>
      <td id="prof5" data-time="evening_practical" data-crs="Course3" data-prof="Jack Hulk">4</td>
      <td id="prof5" data-time="evening_free" data-crs="Course3" data-prof="Jack Hulk">18</td>
      <td id="sob5" style="background:#d3d3d3 ;">22</td>
      <td id="asr5" style="background:#d3d3d3 ;">24</td>
      <td id="prof5">46</td>
      <td id="prof5" style="width: 160px;"></td>
    </tr>
    <tr id="p">
      <td id="id6" class "ids"="" data-id="ids">7</td>
      <td id="prof6">Mr</td>
      <td id="prof6">Jack Hulk</td>
      <td id="prof5" style="font-size: 12px;">Course3</td>
      <td id="prof5" data-time="morning_theory" data-crs="Course3" data-prof="Jack Hulk">8</td>
      <td id="prof5" data-time="morning_practical" data-crs="Course3" data-prof="Jack Hulk">12</td>
      <td id="prof5" data-time="morning_free" data-crs="Course3" data-prof="Jack Hulk">2</td>
      <td id="prof5" data-time="evening_theory" data-crs="Course3" data-prof="Jack Hulk">2</td>
      <td id="prof5" data-time="evening_practical" data-crs="Course3" data-prof="Jack Hulk">4</td>
      <td id="prof5" data-time="evening_free" data-crs="Course3" data-prof="Jack Hulk">18</td>
      <td id="sob5" style="background:#d3d3d3 ;">22</td>
      <td id="asr5" style="background:#d3d3d3 ;">24</td>
      <td id="prof5">46</td>
      <td id="prof5" style="width: 160px;"></td>
    </tr>
  </tbody>
</table>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
...