-4

现在，当我单击图片时，我正在尝试使用 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 个新单元格中的每一个时运行另一个函数，但是当我单击它时出现此错误：（错误指向我的主页的第二行，它只有一个项目它; < html > 标签）。

Uncaught SyntaxError: Unexpected Token }

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

4

1 回答 1

2

不要这样做。构建元素，添加元素，控制发生的事情。另外，不要使用桌子。您使用不正确，因为它没有<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 元素，我们知道它会正常工作。没有不匹配的{or"等​​。

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

于 2013-06-12T02:27:20.970 回答