Question

I have some arbitrary text that i’d like to convert into a table with some values. I do not know if this is possible. The HTML is as follows:

<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>

And i’d like to change the output into:

<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>

Long story but I could not find any plugin to simply convert custom fields into tables in wp e-commerce. The first piece of code i tried flunked badly. I wanted to start by inserting the beginning bits of the HTML table by using the .before() function, but it ended up closing the tag before I could close it myself at the end of the closing div. I.e,

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

ended up both opening and closing the tag before the first strong tag.

Answer 1

You could use contents() to find all nodes, and write a custom filter to find only the textNodes containing ., and use that as the source of your data values.

Something like this would work:

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);

Demo