Deux tables d'une variable String de HTML

Question

Une requête AJAX renvoie une chaîne HTML contenant 2 tables.

Je veux mettre table1dansdiv1 et table2dansdiv2

Si le code HTML représentant les deux tables (ils sont séquentiels, non imbriquées ou quoi que ce soit drôle comme ça) est stocké dans la variable twoTables, comment puis-je utiliser les sélecteurs jQuery (ou toute autre méthode, bien que j'essaie d'éviter la manipulation directe de chaîne) pour scinder la variable?

modifier: données ressemble

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

Answer 1

var $tables = $(twoTables); 

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

Exemple:http://jsfiddle.net/VhAzV/

Depuis twoTables représente une chaîne HTML de 2 tables séquentiels, il suffit d'envoyer la chaîne à un objet jQuery, puis sélectionnez chaque table élément DOM par son indice de base zéro.

Ou vous pouvez use .eq() pour obtenir la table enveloppée dans un objet jQuery.

var $tables = $(twoTables); 

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

---

est ici une version sans jQuery qui utilise encore l'analyseur HTML natif du navigateur:

Exemple: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); 

EDIT: ont rendu vraiment pas jQuery dans l'insertion DOM.

Answer 2

Comme par http://api.jquery.com/load/

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

Vous pouvez le faire deux fois pour deux tables.

Answer 3

Si vous avez une chaîne qui ressemble à quelque chose comme ceci:

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

d'abord en faire un objet jQuery:

foo = $(foo); 

Ensuite, vous pouvez obtenir chaque table et les insérer où vous voulez :

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

Answer 4

Ceci pourrait être moche mais c'est la première chose qui me vient à e solution élégante:

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; 

bonus: pas de frais généraux jQuery!:)

Answer 5

Vous pouvez diviser les deux tables en un tableau. Consultez les liens suivants:

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

Donc, la table ne sera dans un [0], et une table à deux dans un [1].