Question

我希望用div替换一个表及其行和单元格，但是我发现的脚本也用div替换了每个子表及其后代，这是我不想要的。子表应保留表格。

我如何只定位顶级父表而不是任何子表？

    $('table.calendar-header').each(function (){
        $(this).replaceWith( $(this).html()
            .replace(/<tbody/gi, "<div class='table'")
            .replace(/<tr/gi, "<div class='tr'")
            .replace(/<\/tr>/gi, "</div>")
            .replace(/<td/gi, "<div class='td")
            .replace(/<\/td>/gi, "</div>")
            .replace(/<\/tbody/gi, "<\/div")
        );
    });

我已经尝试将：first-child和.first（）插入到各个地方的脚本中无济于事。

这是在脚本运行之前HTML的样子[请注意，我在此代码段中遗漏了子表中的内容]。您可以看到父表中有表。我希望那些保持原样，不被替换。

<table class="calendar-header" cellspacing="0" cellpadding="6" border="0" style="">
    <tbody>
        <tr>
            <td valign="top">
                <table class="calendar" cellspacing="0" cellpadding="2"></table>
            </td>
            <td align="center">
                <div class="eventNav"></div>
            </td>
            <td valign="top" align="right">
                <table class="calendar" cellspacing="0" cellpadding="2"></table>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

我能够像下面所示这样做。

为了使其正常工作，您的子表不能具有类calendar-header。如果他们这样做，您必须将支票if ($(obj).closest("table").hasClass("calendar-header"))更改为您的父表独有的内容。

作为旁注，请注意，如果您的用户使用的是Firefox和AdBlockPlus，那么任何类thead的div都会被theAd（“广告”）弄错，而您的div将会被插件隐藏（它将动态添加到elemhide.css的链接）。所以我将结果类名称更改为divTable，divThead等：

$('table.calendar-header').each(function (){
    // It's important to go from farthest tag to the nearest.
    $(this).find("th").each(replacer);
    $(this).find("td").each(replacer);
    $(this).find("tr").each(replacer);
    $(this).find("tbody").each(replacer);
    $(this).find("thead").each(replacer);
    replacer(0, this); // replace the table tag
});

function replacer(idx, obj) {
    tagName = capitalizeFirstLetter($(obj).prop("tagName").toLowerCase());
    if ($(obj).closest("table").hasClass("calendar-header")) {
        $(obj).replaceWith("<div class='div" + tagName + "'>" + obj.innerHTML + '</div>');
    }
}

function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

Answer 2

每张桌子都有一个td，对吧？

var cur = $('td').closest('table');
while (cur.closest('table').length > 1)
{
    cur = cur.closest('table');
}

Answer 3

我认为您需要手动提取每个标记，并在JQuery中重建DOM。使用replace方法只会盲目地替换所有请求的字符串。

仅使用div而不是子表替换顶级父表元素

3 个答案: