Измените все элементы TABLE на DIV внутри тега TD только jQuery

0

У меня есть структура TABLE которую я хочу преобразовать в DIV используя функцию jQuery

Пример 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>

Структуру, которую я хочу заменить, это та таблица, которая находится внутри тега ячейки (TD). Так сделал код для фильтрации и замены только тех таблиц, которые находятся внутри тега TD

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

Дело в том, что я хочу заменить все элементы, такие как <TABLE>, <TBODY>, <TH>, <TR> и <TD> в элемент <DIV> или <SPAN>.

Как я могу это достичь?

<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>
  • 0
    Не имеет смысла заменять всю <table> одним <div> , поэтому приведите пример желаемого результата. (Предположительно, вы хотите, чтобы отдельные элементы заменяли tds или что-то в этом роде?)
  • 0
    хорошо плохо добавлю образец желаемого результата в вопрос
Показать ещё 1 комментарий
Теги:

1 ответ

0

Вы можете использовать следующее:

$("#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".

Рабочий пример здесь

  • 0
    как сделать это на .each функцию?
  • 0
    @Onimax Это повлияет на все случаи, когда родительское дерево является таблицей -> tr -> td. У вас есть другие случаи, когда вы хотите заменить элементы таблицы?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню