Question

我正在创建表并将其填充为两个div，第一个div是小尺寸，第二个是大视图，其他图形工作正常但元素不工作，它填充最后一个div。你可以在这里看到代码和sample。

$("#sample").empty()
$("#fulls").empty()
var table = document.createElement('table');
table.className="report";
var first = table.insertRow(0);
first.className= "headerTable";
var h1 = first.insertCell(0);
var h2 = first.insertCell(1);
var h3 = first.insertCell(2);
var h4 = first.insertCell(3);
var h5 = first.insertCell(4);

h1.className= "headerTable";
h2.className= "headerTable";
h3.className= "headerTable";
h4.className= "headerTable";
h5.className= "headerTable";

h1.innerHTML = ("Speed");
h2.innerHTML = ("RPM");
h3.innerHTML =("Acc");
h4.innerHTML = ("Brake");
h5.innerHTML =("Dated");
for (var i = 0;i<5;i++)
{
    var first = table.insertRow((i+1));
    first.className= "tableRow";
    var h1 = first.insertCell(0);
    var h2 = first.insertCell(1);
    var h3 = first.insertCell(2);
    var h4 = first.insertCell(3);
    var h5 = first.insertCell(4);
    h1.innerHTML = i;
    h2.innerHTML = i;
    h3.innerHTML = i;
    h4.innerHTML = i;
    h5.innerHTML= new Date();
}
$("#fulls").html(table);
$("#sample").html(table);

我尝试使用javascript但结果相同

document.getElementById("fulls").innerHTML = table;
document.getElementById("sample").innerHTML = table;

Answer 1

您无法在2个容器中插入元素，您需要像

一样克隆它

$("#fulls").html($(table).clone()); 
//or use cloneNode() like $("#fulls").html(table.cloneNode(true));
$("#sample").html(table);

演示：Fiddle

当您将相同的元素实例附加到2个容器时，它将从第一个容器中删除并添加到第二个容器中，因此如果您想在两个位置都保留一个副本，则需要克隆该元素。

Answer 2

这应该对你有用

$("#fulls").html(table);
$("#sample").html($("#fulls").html());

问题是因为您在多个地方只使用了一个table个对象。

Answer 3

我认为你需要这样的东西

var th = document.createElement('th');
var tr = document.createElement('tr');
var tbody = document.createElement('tbody');
var table = document.createElement('table');
table.className = "report";

th.appendChild(img);
tr.appendChild(th);
tbody.appendChild(tr);
table.appendChild(tbody);

将元素插入两个Div

3 个答案: