Question

我在表格中有一个切片图像，可以获得第一行/行，但无法找出完成图像的代码。每次我这样做，图像都会像分裂一样有趣而不是放在一起。

<head>
<script type="text/javascript">
    var noRows = 4;
    var noCols = 5;
    var rowRef = 1;
      function buildTable(){
      document.writeln("<tr>");
      for (var x = 0; x < noCols; x++) {
        document.writeln("<td>");
        document.writeln("<img src=");
        document.writeln("'images/pica1_r.jpg");
        document.writeln(rowRef);
        document.writeln("_c");
        document.writeln(x + 1);
        document.writeln(".jpg' /></td>");
        }
    document.writeln("</tr>");
    return;
}
</script>
</head>
<body>
<table width="80%" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<script type="text/javascript">
    buildTable();
</script>

Answer 1

您遇到的主要问题是您要两次输出.jpg分机。在您当前的流程中，您输出images/pica1_r.jpg1_c1.jpg和images/pica1_r.jpg1_c2.jpg，依此类推。

我没有弄乱rowref和_c，而是简单地使用字符串连接在一行上输出所有图片代码，这有助于防止混淆：
{ {1}}

您甚至可以通过"<img src='images/pica1_r" + x + ".jpg' />"而不是1与0开始循环，让自己更轻松。

以下内容将输出for (var x = 1; x < noCols + 1; x++)，images/pica1_r1.jpg等：

＆＃13;

images/pica1_r2.jpg

＆＃13;

为了覆盖列，您需要使用var noRows = 4; var noCols = 5; var rowRef = 1; function buildTable() { document.writeln("<tr>"); for (var x = 1; x < noCols + 1; x++) { document.writeln("<td>"); document.writeln("<img src='images/pica1_r" + x + ".jpg' />"); document.writeln("</td>"); } document.writeln("</tr>"); return; } buildTable();输出的第二个循环，外部。请注意，这需要是一个全新的变量（我已经使用<td>），并且需要基于y。

以下将输出四行，所有行都包含相同的五个图像。我已将本地图像替换为绝对托管的图像，但只需将注释掉的行与图像行交换即可在本地工作：

＆＃13;

noRows

＆＃13;

var noRows = 4;
var noCols = 5;
var rowRef = 1;

function buildTable() {
  for (var y = 1; y < noRows; y++) {
    document.writeln("<tr>");
    for (var x = 1; x < noCols + 1; x++) {
      document.writeln("<td>");
      //document.writeln("<img src='images/pica1_r" + x + ".jpg' />");
      document.writeln("<img src='http://placehold.it/10" + x + ".jpg' />");
      document.writeln("</td>");
    }
    document.writeln("</tr>");
  }
  return;
}

buildTable();

＆＃13;

希望这有帮助！：）

试图将切片图像放在一起

1 个答案: