jQuery replace content in a table

Question

I have a table that is rendered to the page that contains a link to a website. This allows for the user to easily click on it and navigate etc.

I am building a function that I can pass the table to and it will export the data to excel.

The first part of this though is to create a variable of this table data and remove the link from the column leaving it with only the text.

Here is my table:

<table id="assignedOpenProjects">
<thead>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Bob</td>
        <td>1234</td>
        <td><a href="http://www.google.com">Link</a></td>
    </tr>
</tbody>
</table>

The 3rd column in the table is the one that contains the link (2nd in terms of 0 based).

My jQuery:

// Define the HTML of the table
var table = $('#assignedOpenProjects').prop('outerHTML');

// Loop over all of the table rows
 $(table).find('tbody > tr').each(function () {

    // Loop over the column that contains the link
     $(this).children("td").eq(2).each(function () {

         // Define the value of that column
         var col = $(this).html();

         // Replace the value with the text version
         $(col).replaceWith($(col).text());

     });

});
// Output the table
$('#output').empty().append(table);

When I run this, the content is identical and it doesn't remove the link. However if I log the $(col).text() to the console, it shows what I am expecting the column to be replace with.

Can some one tell me what I am doing wrong as to why this content is not being replaced as I would expect?

The expected outcome should just contain the word Link in Col3 once in the output.

JS Fiddle: https://jsfiddle.net/zrpe8c3x/2/

Answer 1

The approach you're taking of retrieving the HTML of the table and hacking it around is massively overcomplicated. From your description, all you're trying to do is remove the link functionality from the a elements, but keep the text. If this is the case, you can make it a simple one-liner using unwrap() :

$('#assignedOpenProjects').find('a').contents().unwrap();

Updated fiddle

Answer 2

Your code is not working because you initialize your table variable using the outerHTML , but you don't modify it afterwards, so what you're appending at the end of your code is the same variable you defined before, unchanged, which is the same table you had as an input

It happens because you have the following problems in your code:

1. The table variable you're appending at the end is the plain outerHTML and not the jQuery object you build and traverse

2. You're changing a new td object inside, which never gets appended back to the original td , so you end up changing something that you don't use

Here is your code with both things corrected:

$('[name=clean]').click(function(){

    // Define the HTML of the table
    var table = $('#assignedOpenProjects').prop('outerHTML');

    var table2 = $(table);
    // Loop over all of the table rows
     table2.find('tbody > tr').each(function () {

        // Loop over the column that contains the link
         $(this).children("td").eq(2).each(function () {

             // Define the value of that column
             var col = $(this);

             // Replace the value with the text version
             $(col).replaceWith($(col).text());

         });

    });
    // Output the table
    $('#output').empty().append(table2);
});

https://jsfiddle.net/qs3mk7xn/

That being said, I believe you should pay attention to what Rory answered. If you want the same thing he did but in a different table, you could do something like this:

$('[name=clean]').click(function(){
    $('#output').empty().append($('#assignedOpenProjects').clone().find('a').contents().unwrap().parents().last());
});

https://jsfiddle.net/qs3mk7xn/1/

Or, more efficiently, something like this:

$('[name=clean]').click(function(){
    var clon = $('#assignedOpenProjects').clone();
    clon.find('a').contents().unwrap();
    $('#output').empty().append(clon);
});

https://jsfiddle.net/qs3mk7xn/2/

Or, if you want the third td only, something like this:

$('[name=clean]').click(function(){
    var clon = $('#assignedOpenProjects').clone();
    clon.find('tbody tr td:nth-child(3) a').contents().unwrap();
    $('#output').empty().append(clon);
});

https://jsfiddle.net/qs3mk7xn/3/