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

Question

Измените все элементы 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>

Onimax 22 окт. 2013, в 09:10

Источник

0

Не имеет смысла заменять всю <table> одним <div> , поэтому приведите пример желаемого результата. (Предположительно, вы хотите, чтобы отдельные элементы заменяли tds или что-то в этом роде?)
nnnnnn 22 окт. 2013, в 06:51
0

хорошо плохо добавлю образец желаемого результата в вопрос
Onimax 22 окт. 2013, в 06:52
0

stackoverflow.com/questions/10141856/… и stackoverflow.com/questions/9229856/… может помочь вам
run 22 окт. 2013, в 06:53

Показать ещё 1 комментарий

Теги:

jquery

html

1 ответ

Ещё вопросы

Не имеет смысла заменять всю <table> одним <div> , поэтому приведите пример желаемого результата. (Предположительно, вы хотите, чтобы отдельные элементы заменяли tds или что-то в этом роде?)
хорошо плохо добавлю образец желаемого результата в вопрос
stackoverflow.com/questions/10141856/… и stackoverflow.com/questions/9229856/… может помочь вам

Lloyd Banks · Answer 1 · 2013-10-22T06-06-00.000Z

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

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

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

@Onimax Это повлияет на все случаи, когда родительское дерево является таблицей -> tr -> td. У вас есть другие случаи, когда вы хотите заменить элементы таблицы?
ну, есть ... в любом случае, я использовал этот код при добавлении классов в таблицу, которую хотел: $('table td:has(table)').each(function(){ return $('td > table').addClass('red'); }) затем я использовал $(".red").each(function() чтобы изменить элементы таблицы на div., чтобы все работало.