Две таблицы из одной строковой переменной HTML

Question

AJAX-запрос возвращает строку HTML, содержащую 2 таблицы.

Я хочу поместить table1 в div1 и table2 в div2

Если HTML-код, представляющий обе таблицы (они являются последовательными, а не вложенными или чем-то забавным), хранится в переменной twoTables , как я могу использовать селекторы jQuery (или любой другой метод, хотя я пытаюсь избежать прямого манипулирования строками), чтобы разделить переменную?

edit: данные выглядят как

<table id="table1"> ... </table><table id="table2"> ... </table>

Answer 1

Вы можете разделить две таблицы в массив. Проверьте следующее:

var s = "<table>Dude!</table><table>What?</table>";
var a = s.match(/<table>.*?<\/table>/gi);
alert(a);

Таким образом, таблица один будет в [0], а таблица два в [1].

Answer 2

var $tables = $(twoTables);

$('#div1').append( $tables[0] );
$('#div2').append( $tables[1] );

Пример: http://jsfiddle.net/VhAzV/

Поскольку twoTables представляет строку HTML из двух последовательных таблиц, просто отправьте строку в объект jQuery, затем выберите каждую таблицу DOMэлемент по его нулевому индексу.

Или вы можете использовать .eq(), чтобы обернуть таблицу в объект jQuery.

var $tables = $(twoTables);

$tables.eq(0).appendTo('#div1');
$tables.eq(1).appendTo('#div2');

---

Вотнет версии jQuery, которая все еще использует собственный анализатор HTML браузера:

Пример: http://jsfiddle.net/patrick_dw/VhAzV/2/

var twoTables = '<table><tr><td>table one</td></tr></table><table><tr><td>table two</td></tr></table>';
var $tables = document.createElement('div');
$tables.innerHTML = twoTables;

document.getElementById('div1').appendChild($tables.firstChild);
document.getElementById('div2').appendChild($tables.firstChild);

РЕДАКТИРОВАТЬ: Сделано действительно нет-jQuery во вставке DOM.

Answer 3

Это может быть некрасиво, но это первое, что приходит мне в голову, надеюсь, другие найдут более элегантное решение:

var tableEnd = '</table>';

var arr = twoTables.split(tableEnd);

var t1 = arr[0].concat(tableEnd), t2 = arr[1].concat(tableEnd);

div1.innerHTML = t1;

div2.innerHTML = t2;

бонус: нет накладных расходов jQuery! :)

Answer 4

Если у вас есть строка, которая выглядит примерно так:

var foo = "<table><tr><td>1</td></tr></table><table><tr><td>2</td></tr></table>";

Сначала сделайте ее объектом jQuery:

foo = $(foo);

Затем вы можете получить каждую таблицу и вставлять ее куда угодноМне бы хотелось:

$("#div1").append(foo[0]); // First table
$("#div2").append(foo[1]); // Second table

Answer 5

Согласно http://api.jquery.com/load/

$('#result').load('ajax/test.html #container');

Вы можете сделать это дважды для двух столов.