Question

现在我正在尝试使用Javascript函数在我点击图片时在div中创建一个表格。我能够定义创建的表来调用不同的函数吗？（以下示例）

if (band == 'creed') {
   d('albumList').innerHTML = 
      "<table class='default'>"+
         "<td class='albumListC' id='mopCover'>"+
         "<img class='i' src='images/albums/myownprison.jpg'
               onclick='"+"createSongBar('mop');"+"'></td>"+
         "<td class='albumListC' id='hcCover'>"+
         "<img class='i' src='images/albums/humanclay.jpg'
               onclick='"+"createSongBar('hc');"+"'></td>"+
         "<td class='albumListC' id='wCover'>"+
         "<img class='i' src='images/albums/weathered.jpg'
               onclick='"+"createSongBar('w');"+"'></td>"+
         "<td class='albumListC' id='fcCover'>"+
         "<img class='i' src='images/albums/fullcircle.jpg'
               onclick='"+"createSongBar('fc');"+"'></td>"+
      "</table>";
}

代码摘录来自于我点击第二个包含4个单元格的表时要运行的功能。

我的网页显示了一个顶部有3个单元格的表格，每个单元格在点击时会运行一个函数，在其下面创建另一个包含4个单元格的表格。我想要的是当我点击4个新单元格中的每一个时运行另一个函数，但是当我点击它时我得到这个错误:(错误指向我的主页的第二行，其中只有一个项目它;＆lt; html＆gt;标记）。

Uncaught SyntaxError：Unexpected Token}

有关可能导致此问题的建议吗？为简单起见，我省略了程序的其余部分，因为在此之前其他所有内容都没有问题。

Answer 1

不要这样做。构建元素，添加元素，控制发生的事情。另外，不要使用表格。您使用不正确，因为它没有<tr>指令...所以让我们这样做：

if (band == 'creed') {
  var e = d('albumList');
  // set up data row
  var row = document.createElement("div");
  row.setAttribute("class", "default");
  e.appendChild(row);
  // fill row for images
  var imageData = {
        'myownprison': 'mop',
        'humanclay': 'hc',
        'weathered': 'w',
        'fullcircle': 'fc'
      },
      block,
      img;
  // loop through each image name
  Object.keys(imageData).forEach(function(imgName) {
    block = document.createElement("div");
    block.setAttribute("class","albumListC");
    img = new Image();
    img.setAttribute("class","i");
    img.src = "images/albums/" + imgName + ".jpg";
    img.onclick = function(evt) {
      createSongBar(imageData[imgName]);
    };
    // sets up row{block{img}}, the iterates to the next
    block.appendChild(img);
    row.appendChild(block);
  });
}

现在我们有一些可以使用和扩展的通用代码。另外，因为我们没有生成“字符串”但是正确的HTML元素，我们知道它只会起作用。没有不匹配的{或"等

如果你使用的是特定的框架，比如jQuery，这个代码可以缩短。

由Javascript函数引起的意外令牌}

1 个答案: