Question

首先是FIDDLE。

这是我项目的一部分，HTML中的内容太多，所以我只展示结构：

<div class="line">
<table>
    <tbody>
        <tr>
            <td>
                <font face="Arial">
                    <p>
                        <!--content-->
                        <br>
                        <!--content-->
                        <br>
                        <!--content-->
                        <br>
                        <!--content-->
                    </p>
                </font> 
            </td>
        </tr>
    </tbody>
</table>
</div>

这部分是我应该处理的内容。我应该做的是根据<br>将此表拆分为多个表，并保留原始样式。也就是说，每个段落应该在不同的表格中独立。

下面的代码显示了我之前使用<p>拆分内容的解决方案。所以你应该已经知道了我的意图。

function split_func($div) {
    var $rows = $div.find("table tr td p");  // fail to detect tr in this demo
    n = $rows.length;  
    $rows.each(function(i) {            
        var $clone = $div.clone(true, true).insertAfter($div);
        $clone.find("table tr td p").each(function(j) {
            if(i !== (n-j-1)) $(this).remove();
        });
    });
    $div.remove(); 
}

带注释的行是我应该组织提取功能的地方。你能告诉我如何解决这个问题吗？谢谢！

Answer 1

上面的代码示例未能在您尝试查找的元素层次结构中指定tbody元素：

此外，我不建议使用$符号为变量添加前缀，因为在使用jQuery库时这应该被视为保留字符。

var line_w = $(".line");      
for(var i = 0 ;i<line_w.length;i++){         
    if(line_w[i].getElementsByTagName('p').length){
        $(line_w[i]).each(function(i, div) {
            split_func($(div));
        });
    }
}


function split_func(div) {
    var rows = div.find("table tbody tr td p");  // fail to detect tr in this demo
    n = rows.length;
    rows.each(function(i) {            
        var clone = div.clone(true, true).insertAfter(div);
        clone.find("table tbody tr td p").each(function(j) {
            if(i !== (n-j-1)) $(this).remove();
        });
    });
    div.remove(); 
}

Answer 2

这样您就可以将每个段落拆分为自己的表格：

$('.line p').each(function(){
    var paragraphs = $(this).html().split('<br>');
    for(var i=0;i<paragraphs.length;i++){
        if(paragraphs[i]!= '') {       
             $(this).closest('table').clone().appendTo($(this).closest('.line')).find('p').html(paragraphs[i]);
        }                         
    }
});
$('.line table:first').remove();

<强> jsFiddle here

Answer 3

你的意思是这样的？简单的方法，DEMO http://jsfiddle.net/yeyene/Rzz2n/8/

var output = $('.line p.Default').html();
output = output.replace(/\<br><br>/g, '</p></font></td></tr></tbody></table><table><tbody><tr><td><font face="Arial"><p>');
$('.line').html('<table><tbody><tr><td><font face="Arial"><p>'+output);

从表格中的段落中提取行

3 个答案: