Question

好吧，一些信息，我有一个动态创建的表。该表看起来大致如下：

| item__ |价格|类别|类别|类别|类别|图片|

|鸡| 20美元| _______ | _ ______ | _______ | _______ | 1000.png |

        var array = csvpls();
        var table = "<tr>";
        for (var i = 0; i < array.length; i++) {
            for (var j = 0; j < array[i].length; j++) {
                if (j == 6) {
                table += "<td>" + "<img src='CSV_Photos/" + array[i][j] +"'style ='width:500px;height:300px'>";
                } else if {
                table += "<td>" + array[i][j];
                }
        table += "<tr>";
        table += "</tr>";
        }

    document.getElementById("Invtable").innerHTML = table;

这是我目前的代码，其中数组是2D数组。每一个（行中的第6列，我希望它是一个图像）当运行时，这不会显示任何表格。

在下面的代码中

        var array = csvpls();
        var table = "<tr>";
        for (var i = 0; i < array.length; i++) {
            for (var j = 0; j < array[i].length; j++) {
                table += "<td>" + array[i][j];
                }
        table += "<tr>";
        table += "</tr>";
        }

    document.getElementById("Invtable").innerHTML = table;

如果没有if语句和其他img内容，表格会完美显示，但很明显1000.png显示而不是实际图像。 CSV_Photos是存储图像的文件夹，基本上位于同一文件夹中。我不知道出了什么问题，任何帮助或引导都会受到赞赏。

编辑：所以代码的第二部分我的工作完美，它为我生成了一个表。但是，每行的第6列是图片名称（1000.png），它位于文件夹CSV_Photo中。我希望它不显示为1000.png，而是图片。代码的第一部分是我试图使它成为一个图像，但没有创建表，所以我猜这个行表有问题+ =“”+＆lt;“img src ='CSV_Photos /”+ array [ i] [j] +“'style ='width：500px; height：300px'＆gt;”;

Answer 1

尝试：

    var array = csvpls();
    var table = "<table>";
    for (var i = 0; i < array.length; i++) {
        table += "<tr>";

        for (var j = 0; j < array[i].length; j++) {
            table += "<td>" + array[i][j];
        }

        table += "</tr>";
    }
    table += "</table>";

    document.getElementById("Invtable").innerHTML = table;

Answer 2

如果您希望图像位于第2行，则第3个单元格应为：

if (i === 1 && j === 2) {...

如果您希望整个第二行在每个单元格中具有相同的图像，那么它应该是：

if (i === 1) {...

如果您希望整个第3列具有相同的图像，那么它将是：

if (j === 2) {...

如果每个单元格都有不同的图像，那么按表格坐标命名每个文件......

img1-2.png

...然后更改在单元格内呈现图像的字符串：

 table += `<td><img src='http://imgh.us/img${i}-${j}.png' style ='width:50px;height:50px'></td>`

或如果我理解正确，数组已经有了文件名。如果那是真的，那么字符串应该是......

 table += `<td><img src='http://imgh.us/${array[i][j]}' style ='width:50px;height:50px'></td>`

......数组就是这样的：

  var array = [
      ['rt','AD','1000.png','uy','ii'],
      ['rt','AD','1001.png','uy','ii'],
      ['rt','AD','1002.png','uy','ii']
    ];

顺便说一句，我必须对代码进行一些更改才能使它工作，因为它只是你提供的部分代码，但它的要点当然是条件。

此外，您还会注意到字符串的奇怪语法，ES6 template literals或＆＃34;类固醇上的字符串＆＃34;。

演示

＆＃13;

var array = cvpls();
var table = ``;
for (var i = 0; i < array.length; i++) {
  table += `<tr>`;
  for (var j = 0; j < array[i].length; j++) {
    if (i === 1 && j === 2) {
      table += `<td><img src='http://imgh.us/statik.gif' style ='width:50px;height:50px'></td>`;
    } else {
      table += `<td>${array[i][j]}</td>`;
    }
  }
  table += `</tr>`;
  document.getElementById("Invtable").innerHTML = table;
}

function cvpls() {
  return array = [
    [4, 5, 6, 9, 2],
    ['img', 'img', 'img', 'img', 'img'],
    ['d', 'b', 'g', 'i', 'o']
  ];
}

＆＃13;

td {
  border: 1px solid black
}

＆＃13;

<table id='Invtable'></table>

＆＃13;

Answer 3

我认为您的代码中存在一些需要修复的问题：

您没有将td元素追加到tr内，而是直接追加在table内，您需要移动table += "<tr>";行在嵌套循环之前。
并且您没有为<td>元素指定结束标记你加入了img标签会弄乱布局。
另一件事是反过来使用"标记中的'和img 定义，因为HTML使用".."来定义属性。

以下是您的代码应该如何：

var array = csvpls();
var table = "<tr>";
for (var i = 0; i < array.length; i++) {
  table += "<tr>";
  for (var j = 0; j < array[i].length; j++) {
    if (j == 6) {
      table += "<td>" + '<img src="CSV_Photos/' + array[i][j] + '" style ="width:500px;height:300px"></td>';
    } else if {
      table += "<td>" + array[i][j] + "</td>";
    }
  }
  table += "</tr>";
}

document.getElementById("Invtable").innerHTML = table;

使用innerHTML（Javascript / Html）将图像放入表中

3 个答案:

演示