Преобразование абзацев с разрывами в столбцы с использованием jQuery

Question

Преобразование абзацев с разрывами в столбцы с использованием jQuery

0

Я должен обработать html сообщений электронной почты и должен преобразовать html сообщения в простую таблицу со строками и столбцами.

Ниже приведен один сценарий, в котором я просто не могу найти ответ:

<td>
    <p class="productDetails">
        Product:
        Brocade peplum pencil dress
        <br />
        Qty: 1
        <br />
        Size: Size 12
        <br />
        Colour: Black
        <br />
        Price:  GBP 50.00
        <br />
    </p>
</td>

Мне нужно преобразовать его в следующий формат:

<td>
    <td>
        Product:
        Brocade peplum pencil dress
      </td>
      <td>
        Qty: 1
      </td>
      <td>
        Size: Size 12
      </td>
      <td>
        Colour: Black
      </td>
      <td>
        Price:  GBP 50.00
       </td>
</td>

Я избавлюсь от столбцов в столбце с помощью unwrap(), но я застрял на том, как заменить   с тд, потому что пытаемся использовать </td><td>, чтобы заменить   не работает.

У меня есть несколько подобных сценариев, и было бы очень полезно, если я смогу пройти мимо этого момента.

jmarais 17 фев. 2014, в 23:29

Источник

0

Почему будет $('br').replaceWith('</td><td>'); не работа? Вот рабочая скрипка: jsfiddle.net/hPftR .
jamespick 17 фев. 2014, в 21:56
0

Вы можете сделать что-то вроде этого jsfiddle.net/aaPLv
DaniP 17 фев. 2014, в 22:01
0

Похоже, что jQuery изменяет не   на </td><td> а на <td></td> . То же самое происходит в примере с jsfiddle.
jmarais 17 фев. 2014, в 22:15
0

@Danko Ваш пример работает и решит мою проблему, но вы не опубликовали его в качестве ответа, чтобы я мог его пометить.
jmarais 17 фев. 2014, в 22:33
0

@jmarais теперь опубликован как ответная заметка. Я не тестирую его
DaniP 17 фев. 2014, в 22:44

Показать ещё 3 комментария

Теги:

jquery

html

2 ответа

0

Хорошо, так что я использовал заменить   с </td><td> идеи и придумал это.

FIDDLE

var str = '<td>' + $('.productDetails').html();
str = String(str.substring(0,str.lastIndexOf("<br>")) + '</td>').replace(/<br>/g, '</td><td>')

$('#table2 tr').html(str);

Lokesh Suthar 17 фев. 2014, в 20:15

0

Это работает и может быть полезным, но я предпочитаю чистое решение JQuery от Danko. Я всегда могу упасть обратно на ваше предложение , потому что у меня есть другие сценарии , в которых получение селектора может быть трудно , потому что нет  с именем класса.
jmarais 17 фев. 2014, в 22:36
0

@jmarais Это нормально, но я мог бы написать общее решение, если бы знал это. Я просто предположил, что этот формат будет постоянным.
Lokesh Suthar 18 фев. 2014, в 04:52

Ещё вопросы

Почему будет $('br').replaceWith('</td><td>'); не работа? Вот рабочая скрипка: jsfiddle.net/hPftR .
Вы можете сделать что-то вроде этого jsfiddle.net/aaPLv
Похоже, что jQuery изменяет не   на </td><td> а на <td></td> . То же самое происходит в примере с jsfiddle.
@Danko Ваш пример работает и решит мою проблему, но вы не опубликовали его в качестве ответа, чтобы я мог его пометить.
@jmarais теперь опубликован как ответная заметка. Я не тестирую его
Это работает и может быть полезным, но я предпочитаю чистое решение JQuery от Danko. Я всегда могу упасть обратно на ваше предложение , потому что у меня есть другие сценарии , в которых получение селектора может быть трудно , потому что нет  с именем класса.
@jmarais Это нормально, но я мог бы написать общее решение, если бы знал это. Я просто предположил, что этот формат будет постоянным.

DaniP · Accepted Answer · 2014-02-17T21-16-00.000Z

Я думаю, вы хотите создать новую таблицу внутри этого td потому что у вас не может быть вложенного td напрямую; вы можете попробовать что-то вроде этого:

$(document).ready(function(){
  //Create the table wrapping p tag
  $('.productDetails').wrap('<table><tr>');
  //Remove p tag and wrap each item with a td
  $('.productDetails').contents().unwrap().wrap('<td>');
  //Remove td who has a br element inside
  $('td').filter(function() {
    return $(this).html() === '<br>';
    }).remove();
})

Проверьте этот пример Fiddle

_{Это было протестировано только на Chrome и Firefox}