Copy HTML Table to Text Box Using JQuery/JS

Question

My problem has left me trying many solutions and stumped for a while now. My problem is exactly this:

There's a HTML table and a button on a page. Upon pressing the button, a script will run, copying the contents of the cells in the table into a text box. Here is the code for the table:

     <table>
        <tr><th></th><th>Category1</th></tr>
        <tr><td>1.</td><td class="rule">Rule1</td></tr>
        <tr><td>2.</td><td class="rule">Rule2</td></tr>
        <tr><th></th><th>Category2</th></tr>
        <tr><td>3.</td><td class="rule">Rule3</td></tr>
        <tr><td>4.</td><td class="rule">Rule4</td></tr>
        <tr><th></th><th>Category3</th></tr>
        <tr><td>5.</td><td class="rule">Rule5 </td></tr>
        <tr><td>6.</td><td class="rule">Rule6</td></tr>
        <tr><td>7.</td><td class="rule">Rule7</td></tr>
        <tr><th></th><th>Category4</th></tr>
        <tr><td>8.</td><td class="rule">Rule8</td></tr>
    </table>

My first thoughts were to write a script that iterated through the table and copied the contents of each cell (and creating a new line after every 2 cells). I realized very quickly, that I had no idea how to do that. After some searching I was able to come up with a script that clones the table, and it actually works quite well. This code is here:

            $("button").click(function () {
            $("table").clone().appendTo(".copy");
            });

There are two problems that arise from using this method, however. I want plaintext, not a carbon copy of the table. The other problem is that this method only works when I clone the table into a div, it will not work when I try to clone it to a text box.

I've searched for a while for something similar to this and can only find solutions to copying single rows or cells. I had originally started there but couldn't figure out a way to write a loop that started at the beginning of the table and iterated through the entire thing, copying the contents as it iterated row by row (and creating a new line with each new row that it encountered). The loop would obviously end when there were no more rows to iterate through... This all sounds so simple to do, I know there must be a way.

Please Note: This script will be applied to a Site.Master Page so the script must be able to run for a plethora of tables. All of the tables follow the same structure shown above, but some will have more rows than others.

Any ideas? Any help is greatly appreciated.

Answer 1

You could use the .each() JQuery Method:

JS

function cloneTableContents()
{
    $("table tr").each(function()
                    {
                        $(this).children().each(function() 
                                                {
                                                  $(".copy").append($(this).text());
                                                });
                    });
}

JS For All Tables On Page In Order

function cloneTableContents()
{
    $("table").each(function()
                    {
                        $(this).find("tr").each(function()
                                                {
                                                    $(this).children().each(function() 
                                                                            {
                                                                              $(".copy").append($(this).text()+" ");
                                                                            });
                                                });
                    });
}

HTML

   <table id="mine">
        <tr><th></th>
            <th>Category1</th>
        </tr>
        <tr><td>1.</td><td class="rule">Rule1</td></tr>
        <tr><td>2.</td><td class="rule">Rule2</td></tr>
        <tr>
            <th></th>
            <th>Category2</th>
        </tr>
        <tr><td>3.</td><td class="rule">Rule3</td></tr>
        <tr><td>4.</td><td class="rule">Rule4</td></tr>
        <tr>
            <th></th><th>Category3</th>
        </tr>
        <tr><td>5.</td><td class="rule">Rule5 </td></tr>
        <tr><td>6.</td><td class="rule">Rule6</td></tr>
        <tr><td>7.</td><td class="rule">Rule7</td></tr>
        <tr>
            <th></th><th>Category4</th>
        </tr>
        <tr><td>8.</td><td class="rule">Rule8</td></tr>
    </table>
    <textarea class="copy"></textarea>
    <button onclick="cloneTableContents('mine','.copy');">Copy</button>

Working Example: http://casewarecomputers.com:8088/soHelp.html