我有两个单独的表,我想使用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;
答案 0 :(得分:2)
这样做:
$('table').wrap('<td></td>')
.parent().wrapAll('<table><tbody><tr></tr></tbody></table>');
示例: http://jsfiddle.net/6y4qt/
如果页面上有其他表格,请替换:
$('table')
使用:
$('.left-column,.right-column')
答案 1 :(得分:1)
如果我理解你正在尝试做什么,也许这样的事情会起作用:
$('table.left-column').find('tr').each( function(i){
$(this).append( $('table.right-column').find('tr').eq(i).find('td') );
});
答案 2 :(得分:0)
怎么样:
var leftTable = $(".left-column tbody").html();
var rightTable = $(".right-column tbody").html();
var newTable = "<table></table>";
return newtable.append(leftTable).append(rightTable);
答案 3 :(得分:0)
某事like this (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());
答案 4 :(得分:0)
您不能使用'<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);
答案 5 :(得分:0)
可能比你想要的更强大,但非常可重用,这里有一个函数,你可以调用并可选地传递父容器来选择其中的表,并选择在处理它们之后将它们从页面中删除,但是这个将以您指定的组合结构返回所有表格。
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') );