将所有TABLE元素更改为TD标签(仅jQuery)内的DIV [英] Change all TABLE elements to DIV inside the TD tag only jQuery

问题描述

我有一个TABLE结构，我想使用jQuery Function将其元素转换为DIV

I have a TABLE structure that i want to convert its element to DIV using jQuery Function

HTML示例:

<table>
  <tr>
    <td>
             <table>
                <tbody>
                       <tr>
                           <td>1000+</td><td>&nbsp;&nbsp;</td><td>$0.115</td>
                       </tr>
                       <tr>
                           <td>2000+</td><td>&nbsp;&nbsp;</td><td>$0.106</td>
                       </tr>
                       <tr>
                           <td>5000+</td><td>&nbsp;&nbsp;</td><td>$0.099</td>
                       </tr>
                       <tr>
                       <td>10000+</td><td>&nbsp;&nbsp;</td><td>$0.092</td>
                       </tr>
                </tbody>
             </table>
    </td>
  </tr>
  <tr>
    <td>Some Data</td>
  </tr>
</table>

我只想替换的结构是那些位于cell(TD)标记内的表.因此，编写了代码以仅过滤和替换位于TD标记

The structure I only want to replace is those table who's inside the cell (TD) tag. So made a code to filter and replace only those table that reside inside the TD tag

$('table td:has(table)').replaceWith(function() {
           //Replace function starts here
})

问题是我想将<TABLE>，<TBODY>，<TH>，<TR>和<TD>之类的所有元素替换为<DIV>或<SPAN>元素.

The thing is i want to replace all elements like <TABLE>,<TBODY>,<TH>,<TR> and <TD>into <DIV> or <SPAN> element.

我怎样才能做到这一点?

How can I be able to achieve this?

<table width="95%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><div>
    <div>
        <div>
                <div>1000+</div><div>&nbsp;&nbsp;</div><div>$0.115</div>
        </div>
        <div>
                <div>2000+</div><div>&nbsp;&nbsp;</div><div>$0.106</div>
        </div>
        <div>
                <div>5000+</div><div>&nbsp;&nbsp;</div><div>$0.099</div>
        </div>
        <div>
                <div>10000+</div><div>&nbsp;&nbsp;</div><div>$0.092</div>
        </div>
    <div>
</div></td>
  </tr>
  <tr>
    <td>Some Data</td>
  </tr>
</table>

推荐答案

您可以使用以下内容:

$("#me").click(function(){
    var innerhtml = $("table tr td").html();
    var innerhtml = innerhtml.replace(/table/g, "div");
    var innerhtml = innerhtml.replace(/tbody/g, "div");
    var innerhtml = innerhtml.replace(/tr/g, "div");
    var innerhtml = innerhtml.replace(/td/g, "div");
    $("table tr td").html(innerhtml);
});

它从表内部获取HTML，并将"table"，"tbody"，"tr"和"td"的所有实例替换为"div".

It grabs the HTML from inside your table and replaces all instances of "table", "tbody", "tr", and "td" with "div".

工作示例此处

这篇关于将所有TABLE元素更改为TD标签(仅jQuery)内的DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！