将图像插入表格



我有一个表,在其中我将从查询向表中插入数据。因为当我插入图像时,我将每个键和对都视为文本,它将返回[object HTMLImageElement]。因为我在它没有正确渲染之后将其转换为文本。有更好的方法吗?

if (condition) == 1) {
var image = document.createElement("img");
image.src = "source1.png";
} else if (condition) == 0 ) {
var image = document.createElement("img");
image.src = "source2.png";
}
let Table = [
{'First Text Item': 'Text Result'),
'Second Text Item': 'Text Result',
'Third Text Item': 'Text Result',
'Fourth Text Item': 'Text Result',
'Fifth Text Item': 'Text Result',
'Image': image},
];
function generateTable(table, data) {
for (let element of data) {
let row = table.insertRow();
for (key in element) {
let cell = row.insertCell();
let text = document.createTextNode(element[key]);
cell.appendChild(text);
}
}
}
generateTable(table, Table);

您的问题似乎是let text = document.createTextNode(element[key]);

您需要检查属性是否是DOM组件:

  • 如果是Image DOM元素-直接添加
  • 如果不是let text = document.createTextNode(element[key]);

关于如何检测DOM元素,您可以看到以下答案:https://stackoverflow.com/a/384380/2938073

您可以使用Element.tagName(请参阅(获取DOM类型

最新更新