jQuery function to create HTML table from another HTML table

Question

I have an HTML table on a page that I'd like to use jQuery to take the information from, clean/sanitize it, and create a new "clean" HTML table with the information.

I have the table with the following <tr> structure:

<tr class="dirRow">
    <td style="border-style:None;width:35px;">
        <a href="http://www.link.com">
            <img class="class-here" src="/media/proxy.ashx?id=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx&amp;size=50w50h_fxd" style="border-width:0px;height:35px;width:35px;">
        </a>
    </td>
    <td style="border-style:None;">
        <a href="http://www.link2.com">Full Name</a>
    </td>
    <td style="border-style:None;">
        <span>123.456.7890</span>
    </td>
    <td style="border-style:None;">
        <span>456.789.0123</span>
    </td>
    <td style="border-style:None;">
        <span>Office</span>
    </td>
    <td style="border-style:None;">
        <span>Title</span>
    </td>
    <td style="border-style:None;">
        <span>Supervisor</span>
    </td>
</tr>
<!-- 150+ more tr with same structure -->

Which I'd like to input the information into the following table (formatted this way to use a plugin that takes this table input and formats it into an org chart). I've commented how the information should be modified from the original HTML table.

<table id="orgChartData">
    <tbody>
        <tr>
            <th>id</th>
            <th>parent id</th>
            <th>image</th>
            <th>name</th>
            <th>phone</th>
            <th>phonecell</th>
            <th>office</th>
            <th>title</th>
            <th>supervisor</th>
        </tr>
        <tr>
            <td>
                <!-- Full Name (text only, no href, goes here) -->
                Full Name
            </td>
            <td>
                <!-- Supervisor (text only, no span, goes here) -->
                Supervisor
            </td>
            <td>
                <!-- img src (just the relative path, no query string) -->
                /media/proxy.ashx?id=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
            </td>
            <td>
                <!-- Full Name (including href with "xlink:" added to the beginning of the href) -->
                <a xlink:href="http://www.google.com/" target="_blank">Full Name</a>
            </td>
            <td>
                <!-- Phone (no span) -->
                123.456.7890
            </td>
            <td>
                <!-- Phonecell (no span) -->
                456.789.0123
            </td>
            <td>
                <!-- Office (no span) -->
                Office
            </td>
            <td>
                <!-- Title (no span) -->
                Title
            </td>
            <td>
                <!-- Supervisor (no span) -->
                Supervisor
            </td>
        </tr>
    </tbody>
</table>

Updated my code based on Michael Sacket's answer below

I now have all the variables in the right format, but need to create the new <tr>s based on these variables.

$('tr.dirRow').each(function () {
    var tds = $(this).children();
    var fullName = tds.eq(1).text();
    var supervisor = tds.eq(6).text();
    var imgSource = tds.eq(0).find("img").attr("src");
    var imgSourceClean = imgSource.substring(0, imgSource.indexOf('&'));
    var fullNameHref = tds.eq(1).find("a").attr("href");
    var fullNameHyperlink = '<a xlink:href="' + fullNameHref + '">' + fullName + '</a>';
    var phone = tds.eq(2).text();
    var phoneCell = tds.eq(3).text();
    var office = tds.eq(4).text();
    var title = tds.eq(5).text();
});

Thanks for any help.

Michael Sacket · Accepted Answer · 2017-01-05 01:08:11Z

1

My suggestion is to break it up, one part at a time. To get you started:

Getting the data

var data = [];
var tds = null;
$('tr.dirRow').each(function(){
    tds = $(this).children();
    data.push({
        "fullName": tds.eq(1).text()
    });
});
console.log(data);

Sending it to the destination table

// grab a reference to the destination table
var destTbody = $('#orgChartData > tbody');

// loop through the data adding rows
var newRow = null;
for(var i=0;i<data.length;i++){
    newRow = $('<tr/>');
    newRow.append( $('<td>' + data[i].fullName + '</td>') );
    destTbody.append(newRow); 
}

Note: You could also do all that in a single loop within the $('tr.dirRow').each().

edited Jan 5, 2017 at 1:08

answered Jan 4, 2017 at 22:25

Michael Sacket

9078 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

troyrmeyer Over a year ago

Thank you for the start. I've expanded on your answer and have gotten all the variables to log correctly (see my updated question), I just need to create <tr> for each of my new variables, but not sure how to go about that.

Michael Sacket Over a year ago

I've added a little more.

troyrmeyer Over a year ago

Thank you, this got me started enough to where I expanded and solved my problem!

Collectives™ on Stack Overflow

jQuery function to create HTML table from another HTML table

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related