Объединение двух таблиц в одну таблицу JQuery - PullRequest
2 голосов
/ 23 февраля 2011

У меня есть две отдельные таблицы, я хочу объединить в одну таблицу с помощью JQuery. Но результат, который я вижу, не правильный. Буду признателен за любую помощь в этом.

Исходная таблица

<html>
<table class="left-column">
<tbody>
    <tr>
        <td>Name
        </td>
    </tr>
    <tr>
        <td>Age
        </td>
    </tr>
</tbody>
 </table>
 <table class="right-column">
<tbody>
    <tr>
        <td>Andy
        </td>
    </tr>
    <tr>
        <td>30
        </td>
    </tr>
</tbody>
</table>
</html>

Целевой стол

<html>
<table>
    <tr>
        <td>
            <table class="left-column">
                <tbody>
                    <tr>
                        <td>Name
                        </td>
                    </tr>
                    <tr>
                        <td>Age
                        </td>
                    </tr>
                </tbody>
             </table>
        </td>
        <td>
            <table class="right-column">
                    <tbody>
                    <tr>
                        <td>Andy
                        </td>
                    </tr>
                    <tr>
                        <td>30
                        </td>
                    </tr>
                </tbody>
             </table>
        </td>
    </tr>
</table>
</html>

Фрагмент кода Jquery

var leftTable=$('table.left-column').clone(); 
var rightTable=$('table.right-column').clone(); 
var newTable= $('div').append('<table><tr><td>')
    .append(leftTable).append('</td><td>')
    .append(rightTable).append('</td></tr></table>')
    .html(); 
return newTable;

Ответы [ 6 ]

2 голосов
/ 23 февраля 2011

Просто сделайте это:

$('table').wrap('<td></td>')
          .parent().wrapAll('<table><tbody><tr></tr></tbody></table>');

Пример: http://jsfiddle.net/6y4qt/


Если на странице есть другие таблицы, замените:

$('table')

с

$('.left-column,.right-column')
2 голосов
/ 23 февраля 2011

Если я правильно понимаю, что вы пытаетесь сделать, может быть, что-то вроде этого будет работать:

$('table.left-column').find('tr').each( function(i){
  $(this).append( $('table.right-column').find('tr').eq(i).find('td') ); 
});
0 голосов
/ 23 февраля 2011

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

function mergeTables(parent, remove){
    //if no parent is passed, default to body 
    if (!parent){
        parent = 'body';
    }

    //place to store the full HTML string of all the combined tables
    var table_html = '<table><tr>';
    //go through all tables
    $(parent).find('table').each(function(){
        //add their HTML to our big HTML string
        table_html += '<td><table>' + $(this).html() + '</table></td>';
        //remove that table from the page
        if (remove){
        $(this).remove();
    }
    });
    //close off and return the big HTML string
    return table_html + '</tr></table>';
}

//call example
$('#container').html( mergeTables('#container') );
0 голосов
/ 23 февраля 2011

Вы не можете использовать "частичные элементы", такие как '<table><tr><td>'. Измените код на:

var leftTable  = $('table.left-column' ).clone();
var rightTable = $('table.right-column').clone();

var newTable   = $('div').append('<table><tr><td></td><td></td></tr></table>');
    newtable   = $('td:first', newtable).append(leftTable );
    newtable   = $('td:last' , newtable).append(rightTable); 
0 голосов
/ 23 февраля 2011

Как насчет чего-то , как это (jsFiddle) .Это дает именно тот результат, который вы запрашивали в 3 коротких строках кода.(ПРИМЕЧАНИЕ. Этот код фактически перемещает отдельные таблицы в объединенную таблицу вместо их копирования / клонирования.

$('div').html('<table border=1><tr><td id="cell1"></td><td id="cell2"></td></tr></table>');
$('#cell1').html($('.left-column').clone());
$('#cell2').html($('.right-column').clone());
0 голосов
/ 23 февраля 2011

Как насчет:

var leftTable = $(".left-column tbody").html();
var rightTable = $(".right-column tbody").html();

var newTable = "<table></table>";
return newtable.append(leftTable).append(rightTable);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...