Question

我有一个表，每行都有一个分配给它的类。基于这个类，我想在一个具有该类名的所有行的第一列中添加行范围。例如我有一个html表格如下

<table id="myTestTable">
    <tbody>
        <tr id="1" class="A">
            <td>A</td>
            <td>Text</td>
        </tr>
        <tr id="2" class="A">
            <td>A</td>
            <td>Text</td>
        </tr>
        <tr id="3" class="B">
            <td>B</td>
            <td>Text</td>
        </tr>
        <tr id="4" class="B">
            <td>B</td>
            <td>Text</td>
        </tr>
        <tr id="5" class="B">
            <td>B</td>
            <td>Text</td>
        </tr>
    </tbody>
</table>

我需要将其转换为

<table id="myTestTable">
    <tbody>
        <tr id="1" class="A">
            <td rowspan="2">A</td>
            <td>Text</td>
        </tr>
        <tr id="2" class="A">

            <td>Text</td>
        </tr>
        <tr id="3" class="B">
            <td rowspan="3">B</td>
            <td>Text</td>
        </tr>
        <tr id="4" class="B">

            <td>Text</td>
        </tr>
        <tr id="5" class="B">

            <td>Text</td>
        </tr>
    </tbody>
</table>

我知道我们需要使用像此$('Selector').attr('rowspan', 'n');这样的行范围属性，我们可以使用jquery length属性来计算具有某个类$(".a").length)的行数，但无法弄清楚如何解决这个特殊问题。

有什么想法吗？感谢

Answer 1

这是一个使用A / B类查找第一行，然后将第一个td的rowspan修改为A / B类的行数的示例：

$(document).ready(function() {
  var a_length = $('#myTestTable .A').length;
  var b_length = $('#myTestTable .B').length;

  $('#myTestTable .A').first().find("td:first").attr('rowspan', a_length);
  $('#myTestTable .B').first().find("td:first").attr('rowspan', b_length);

  $('#myTestTable .A, #myTestTable .B').each(function(i, obj) {
    if (!$(obj).find("td:first").attr("rowspan")) {
      $(obj).find("td:first").remove();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="myTestTable">
  <tbody>
    <tr id="1" class="A">
      <td>A</td>
      <td>Text</td>
    </tr>
    <tr id="2" class="A">
      <td>A</td>
      <td>Text</td>
    </tr>
    <tr id="3" class="B">
      <td>B</td>
      <td>Text</td>
    </tr>
    <tr id="4" class="B">
      <td>B</td>
      <td>Text</td>
    </tr>
    <tr id="5" class="B">
      <td>B</td>
      <td>Text</td>
    </tr>
  </tbody>
</table>

我们如何使用jquery在表格单元格中添加行范围属性

1 个答案: