用jQuery合并表行

时间:2018-11-09 23:26:21

标签: javascript jquery html-table

我有一个表,每个人的值都相同,所以我需要合并具有相同值的那个人的那些行。在某些情况下,具有相同值的所有行都将合并,但以相同值重复它们。在其他情况下,具有相同名称的课程将合并,这与我之前提到的不正确,只有一个人的相同值应该合并, (对不起,我的英语不好,我不知道该怎么解释,希望摘要向您介绍)  有什么解决办法吗?

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>

0 个答案:

没有答案