Question

我有一个函数可以将原始HTML输出到表中，但我想取出前三列并将它们放在另一个div中。

我正在考虑在隐藏的页面上创建一个div，将div的html设置为我得到的原始HTML，然后使用选择器语法将其剥离到每个表的div中。有没有办法在没有中间的faux-div的情况下保存原始HTML？

Answer 1

这一切都取决于“获取原始HTML的功能”的功能。它在哪里获取HTML？如果它是某种格式而不是渲染节点，那么您应该能够在渲染之前根据需要对其进行操作。如果你已经用字符串格式（并且标记有效），jQuery非常擅长将字符串转换为可遍历的对象。例如：

var xml = '<div><span>hello</span></div>';
console.log($(xml).find('span'));

在FireBug中，这会将span显示为对象节点。

Answer 2

我不确定你为什么要这样做，而不是安排你的数据服务器端，但有一种方法是：

$(document).ready(
    function(){
        $('table').click(
            function(){
                $('<table />').appendTo('#newTable').addClass('new');
                $('table').eq(0).find('tr td:first-child').each(
                    function(){
                        $(this).appendTo('.new').wrap('<tr></tr>');
                    });
            });
    });

使用（x）html：

<table>
    <tr>
        <td>1:1</td>
        <td>1:2</td>
        <td>1:3</td>
    </tr>
    <tr>
        <td>2:1</td>
        <td>2:2</td>
        <td>2:3</td>
    </tr>
    <tr>
        <td>3:1</td>
        <td>3:2</td>
        <td>3:3</td>
    </tr>
    <tr>
        <td>4:1</td>
        <td>4:2</td>
        <td>4:3</td>
    </tr>
</table>
<div id="newTable"></div>

JS Fiddle demo

该演示使用jQuery's click()事件，但这只是为了展示它以交互方式工作;它当然可以直接放入DOM-ready / $(document).ready(function(){/* ... */});事件。

上面的代码允许重复点击（每次将第一个'列'移动到新表中），编辑使用jQuery's one()删除了这种可能性，给出了以下jQuery：

$(document).ready(
    function(){
        $('table').one('click',
            function(){
                $('<table />').appendTo('#newTable').addClass('new');
                $('table').eq(0).find('tr td:first-child').each(
                    function(){
                        $(this).appendTo('.new').wrap('<tr></tr>');
                    });
            });
    });

JS Fiddle demo, featuring one()

将包含表的一个div放入包含表的两个div中

2 个答案: