使用jQuery实现表格单元格内容拆分至多行的技术需求

我会帮你实现这个表格行拆分逻辑，规则如下：

• 当表格只有1个<tr>时，将该行内所有<td>的内容各自均分为两部分，每部分对应生成一个新的<tr>
• 当表格有多个<td>时，每个<td>的内容拆分为两半，生成两行，每行包含对应拆分后的<td>元素

原始示例表格 #

<table>
  <tr>
   <td>
     1 Content content Content content Content content Content content
     2 Content content Content content Content content Content content
     3 Content content Content content Content content Content content
     4 Content content Content content Content content Content content
   </td> 
  </tr>
</table>

拆分后效果 #

<table>
  <tr>
   <td>
     1 Content content Content content Content content Content content
     2 Content content Content content Content content Content content
   </td> 
  </tr>
  <tr>
   <td>
     3 Content content Content content Content content Content content
     4 Content content Content content Content content Content content
   </td> 
  </tr>
</table>

jQuery实现代码 #

$(document).ready(function() {
    // 遍历目标表格，可根据实际情况修改选择器，比如#target-table
    $('table').each(function() {
        var $table = $(this);
        var $rows = $table.find('tr');
        
        // 处理单一行的场景
        if ($rows.length === 1) {
            var $originalRow = $rows.first();
            var $tds = $originalRow.find('td');
            
            // 创建两个空行用于存放拆分内容
            var $newRow1 = $('<tr></tr>');
            var $newRow2 = $('<tr></tr>');
            
            $tds.each(function() {
                var content = $(this).html().trim();
                // 按换行拆分内容，可根据实际内容调整拆分规则（比如字符数、特定分隔符）
                var lines = content.split(/\n+/).filter(line => line.trim() !== '');
                var midPoint = Math.ceil(lines.length / 2);
                
                // 拆分内容为两部分
                var part1 = lines.slice(0, midPoint).join('\n');
                var part2 = lines.slice(midPoint).join('\n');
                
                // 给新行添加拆分后的td元素
                $newRow1.append($('<td></td>').html(part1));
                $newRow2.append($('<td></td>').html(part2));
            });
            
            // 替换原始行并插入第二行
            $originalRow.replaceWith($newRow1).after($newRow2);
        } else {
            // 处理多个td的场景，假设每行结构一致
            var newRows = [[], []]; // 存储两行的td内容集合
            
            $rows.each(function() {
                $(this).find('td').each(function(index) {
                    var content = $(this).html().trim();
                    var lines = content.split(/\n+/).filter(line => line.trim() !== '');
                    var midPoint = Math.ceil(lines.length / 2);
                    
                    newRows[0].push(lines.slice(0, midPoint).join('\n'));
                    newRows[1].push(lines.slice(midPoint).join('\n'));
                });
            });
            
            // 清空原表格，添加拆分后的新行
            $table.empty();
            newRows.forEach(function(rowContent) {
                var $newRow = $('<tr></tr>');
                rowContent.forEach(function(tdContent) {
                    $newRow.append($('<td></td>').html(tdContent));
                });
                $table.append($newRow);
            });
        }
    });
});

代码说明 #

• 核心逻辑通过换行符拆分内容，计算中间点后分割成两部分，你可以根据实际内容的格式（比如固定字符数、特定分隔标记）调整拆分规则
• 针对单一行和多列场景分别处理，确保生成的表格结构符合需求
• 选择器$('table')可替换为具体的表格ID或类名，避免影响页面中其他无关表格

内容的提问来源于stack exchange，提问作者Jeff