【jquery实现动态给表格添加删除行，合并指定单元格】

以下是一个使用jQuery实现动态添加、删除表格行，并且合并指定单元格的示例代码：

HTML部分：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
 
<button id="addRow">Add Row</button>

CSS部分：

#myTable td:first-child {
  font-weight: bold;
}

jQuery部分：

$(document).ready(function() {
  var rowId = 0;
 
  // 添加行
  $('#addRow').click(function() {
    var newRow = '<tr id="row' + rowId + '">' +
                 '  <td>Name ' + rowId + '</td>' +
                 '  <td>30</td>' +
                 '  <td>name' + rowId + '@example.com</td>' +
                 '  <td><button class="deleteRowBtn" data-rowid="' + rowId + '">Delete</button></td>' +
                 '</tr>';
    $('#myTable tbody').append(newRow);
    mergeCells('Name ' + rowId, 0); // 合并第一列相同的单元格
    rowId++;
  });
 
  // 删除行
  $(document).on('click', '.deleteRowBtn', function() {
    var rowToDelete = $(this).data('rowid');
    $('#row' + rowToDelete).remove();
  });
 
  // 合并单元格的函数
  function mergeCells(text, colIndex) {
    var lastRow = -1;
    var lastValue = null;
    $('#myTable tbody tr').each(function() {
      var currentValue = $(this).children('td').eq(colIndex).text();
      if (currentValue !== lastValue) {
        $(this).children('td').slice(colIndex, colIndex + 1).attr('rowspan', 1);
      } else {
        $(this).children('td').slice(colIndex, colIndex + 1).removeAttr('rowspan');
        $(lastRow).children('td').slice(colIndex, colIndex + 1).attr('rowspan', function(i, val) { return val + 1; });
      }
      lastValue = currentValue;
      lastRow = this;
    });
  }
});

在这个示例中，我们定义了一个表格和一个按钮用于添加新行。jQuery用于处理添加行和删除行的事件，以及在添加新行时合并特定列中的单元格。这个例子简单地合并了第一列，但你可以根据需要合并任何列的单元格。