Как я могу изменить этот HTML-код в таблице с помощью jQuery

Question

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

<div class="custom_meta">
    <strong>Length: </strong>
    11.22.33.44.55.66
    <br>

    <strong>Width: </strong>
    11.22.33.44.55.66
    <br>
</div>

И я хотел бы изменить вывод на:

<div class="custom_meta">
    <table>
        <tbody>
            <tr>
                <td>
                    <strong>Length: </strong>
                </td>
                <td>11</td>
                <td>22</td>
                <td>33</td>
                <td>44</td>
                <td>55</td>
                <td>66</td>
            </tr>

            <tr>
                <td>
                    <strong>Width: </strong>
                </td>
                <td>11</td>
                <td>22</td>
                <td>33</td>
                <td>44</td>
                <td>55</td>
                <td>66</td>
            </tr>
        </tbody>
    </table>
</div>

Длинная история, но я не смог найти плагин для простого преобразования пользовательских полей в таблицы в wp e-commerce. Первый кусок кода, который я попробовал, провалился. Я хотел начать с вставки начальных битов таблицы HTML с помощью функции .before(), но в итоге он закрыл тег, прежде чем я смог сам закрыть его в конце закрывающего div. То есть,

$(".custom_meta strong:first").before("<table><tbody><tr><td>");

заканчивал тем, что открывал и закрывал тег перед первым сильным тегом.

Answer 1

Вот еще одна реализация.Честно говоря, большинство из них будет работать нормально.

Недостатком этой реализации является предположение, что <br> всегда будет разделять строки, а <strong> всегда будет содержать информацию заголовка: http://jsfiddle.net/rkw79/DAwuw/4/

var nodes = $.map($('.custom_meta:first').html().split('<br>'), function(o, i) {
    return $.trim(o);
});

var rows = $.map(nodes, function(row) {
    if (row == '') { return ''; }
    row = row.replace('</strong>', '</strong>.');
    tds = $.map(row.split('.'), function(td) { return '<td>' + td + '</td>'; }).join('\n');
    return '<tr>' + tds + '</tr>';
}).join('\n');

$('body').append($('<table></table>').append(rows));

Answer 2

final_contents = "<table>"; 

$('.custom_meta').contents().each(function(){ 
     var values = []; 
    if( $(this).text().trim() === 'Length:' )
     {
         final_contents += "<tr>";
         final_contents += "<td>Length:</td>";   
     }
    else if( $(this).text().trim() === 'Width:' )
    {
         final_contents += "<tr>";
         final_contents += "<td>Width:</td>"; 
    } 

     if( this.nodeType === 3 && $(this).text().trim().length !== 0 )
         values = $(this).text().split('.'); 

     for( var i = 0; i < values.length; i++ ) 
          final_contents += "<td>"+values[i].trim() + "</td>"; 

     if( this.nodeName.trim() === 'BR' )
         final_contents += "</tr>"  
})

final_contents += "</table>";     
$('.custom_meta').html( final_contents ); 

Вот скрипка .

Answer 3

Должно работать следующее:

var table = $('<tbody></tbody>');
$('.custom_meta').contents().filter(function() {
  return this.nodeType === 3;
}).each(function() {
  var row = $('<tr></tr>');
  var header = $(this).prevAll('strong');
  if (header.length) {
    row.append($('<td></td>').append(header));
    $.each($(this).text().split('.'), function(index, element) {
        row.append($('<td>' + element + '</td>'));
    });
    table.append(row);
  }
});
$('.custom_meta').empty().append($('<table></table>').append(table));

Смотрите здесь для jsFiddle.

Answer 4

Вы можете использовать contents(), чтобы найти все узлы, и написать собственный фильтр, чтобы найти только текстовые узлы, содержащие ., и использовать его как источник значений ваших данных.

Примерно такработа:

var headers = $('.custom_meta strong');
var values = $('.custom_meta').contents().filter(function() {
    return this.nodeType == 3  // text node
        && this.nodeValue.indexOf('.') > 0;
});

var table = $('<table/>');
var tbody = $('<tbody/>');

headers.each(function(n) {
    var tr = $('<tr/>');
    tr.append($('<td><strong>' + $(this).html() + '</strong></td>'));

    var itemValues = values[n].nodeValue.split('.');
    for(var i = 0; i < itemValues.length; i++) {
        tr.append($('<td>' + itemValues[i].trim() + '</td>'));
    }

    tbody.append(tr);
});

table.append(tbody);
$('.custom_meta').empty().append(table);

Демо

Answer 5

Это, вероятно, не самое чистое решение, но оно хотя бы работает:

function nextSiblingToCells(that){
    var t = that.nextSibling.nodeValue.split('.');
    for (i=0;i<t.length;i++){
        $('<td />').text(t[i]).appendTo($('table tbody tr:last'));
    }
};

var table = document.createElement('table'),
    tbody = document.createElement('tbody'),
    text;

table.appendChild(tbody);

$(table).appendTo($('.custom_meta:first'));

$('strong').each(
    function(){
        text = $(this).text();
        $('<tr />').appendTo($(table)).append('<td>' + text + '</td>');
        nextSiblingToCells(this,'br');
    });

JS Fiddle demo .

Ссылки:

• jQuery, из jQuery API :
  • append().
  • appendTo().
  • each().
  • text().
• JavaScript, от Ресурс JavaScript Mozilla Developer Network :
  • nextSibling.
  • nodeValue.
  • split().

Answer 6

Что-то вроде:

$html = $(".custom_meta").html(); //store original value
$(".custom_meta").html("<table><tbody id='mytbody'></tbody></table>"); //set html to nothing
var rows = $html.split("<br>"); //split the html based on <br>
for(var i = 0; i < rows.length - 1; i++) { //loop until i = length - 1 (- 1 because there are as many <br> tags as <strong> tags - so there would be one before and after each <br>, thus you want to get rid of the last one.
    $("#mytbody").append("<tr><th>" + $("<div></div>").html($html).find("strong:eq(" + i + ")").html() + "</th></tr>"); //create a new div temporarily, add the original html and then get the content of the strong at the current position (i)
}

Это должно, по крайней мере, помочь вам начать - однако я не дам вам полный ответ, поскольку вы не обязательно будете учиться таким образом.Осталось только извлечь разделенные. И разделить списки на основе ..

С уважением, Ричард

Правка: см. Мою скрипку JS - http://jsfiddle.net/a6Bcu/