Скопируйте таблицу HTML в текстовое поле с помощью JQuery/JS

Question

Моя проблема заставила меня попробовать много решений и на какое-то время осталась в тупике. Моя проблема именно в этом:

На странице есть HTML-таблица и кнопка. После нажатия кнопки запускается скрипт, копирующий содержимое ячеек таблицы в текстовое поле. Вот код для таблицы:

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

Моими первыми мыслями было написать скрипт, который перебирает таблицу и копирует содержимое каждой ячейки (и создает новую строку после каждых 2 ячеек). Я очень быстро понял, что понятия не имею, как это сделать. После некоторых поисков я смог придумать сценарий, который клонирует таблицу, и он на самом деле работает довольно хорошо. Этот код здесь:

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

Однако при использовании этого метода возникают две проблемы. Я хочу открытый текст, а не точную копию таблицы. Другая проблема состоит в том, что этот метод работает, только когда я клонирую таблицу в div, он не будет работать, когда я пытаюсь клонировать ее в текстовое поле.

Некоторое время я искал что-то похожее на это и могу найти только решения для копирования отдельных строк или ячеек. Первоначально я начал там, но не мог найти способ написать цикл, который начинался в начале таблицы и повторялся по всему объекту, копируя содержимое, пока он повторялся строка за строкой (и создавая новую строку с каждым новым строка, с которой он столкнулся). Цикл, очевидно, закончится, когда не будет больше строк для перебора... Все это звучит так просто, я знаю, что должен быть способ.

Обратите внимание: этот сценарий будет применен к странице Site.Master, поэтому сценарий должен быть в состоянии выполнять множество таблиц. Все таблицы имеют одинаковую структуру, показанную выше, но в некоторых будет больше строк, чем в других.

Есть идеи? Любая помощь с благодарностью.

Answer 1

Вы можете использовать метод.each() JQuery:

JS

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

JS для всех таблиц на странице в порядке

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>

Рабочий пример: http://casewarecomputers.com:8088/soHelp.html