Question

AJAX查询返回一个包含2个表的HTML字符串。

我想将 table1 放入 div1 和 table2 进入 DIV2

如果表示两个表的HTML（它们是顺序的，不是嵌套的或类似的任何有趣的东西）存储在变量 twoTables 中，我如何使用jQuery选择器（或任何其他方法，尽管我我试图避免直接字符串操作）拆分变量？

编辑：数据看起来像

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

因此，表1将位于[0]中，而表2位于[1]中。

Answer 2

var $tables = $(twoTables);

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

示例： http://jsfiddle.net/VhAzV/

由于twoTables表示包含2个连续表的HTML字符串，因此只需将字符串发送到jQuery对象，然后按基于零的索引选择每个表DOM元素。

或者您可以use .eq()将表包装在jQuery对象中。

var $tables = $(twoTables);

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

这是一个仍然使用浏览器的原生HTML解析器的jQuery版本：

示例： 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);

编辑：在DOM插入中使其成为真正的无jQuery。

Answer 3

根据http://api.jquery.com/load/

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

你可以为两张桌子做两次。

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

这可能很丑，但这是我想到的第一件事，希望其他人能找到更优雅的解决方案：

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开销！：）

来自HTML的一个String变量的两个表

5 个答案: