Question

我正在尝试用jQuery创建一个表。

$(function() {

    var genres = ["Genre1", "Genre2", "Genre3", "Genre4", "Genre5", "Romance", "Satire"];
    console.log(genres);
}

我能够使用此代码制作一个列表。

for (var i = 0; i < genres.length; i++) {
    console.log(genres[i]);
    $('ul').append("<li>" + genres[i] + "</li>")
}

我正在尝试制作一个包含流派的表格。这是我正在使用的代码 - 但它不起作用，我不知道为什么。

for (var i = 0; i < genres.length; i++) {
    console.log(genres[i]);
    $('ul').append("<tr><td>" + genres[i] + "</td></tr>")
}

$('td').each(genres, function(index, value) {});

编辑：这是我的整个JS代码

$(function() {

    var genres = ["Fiction", "Comedy", "Drama", "Horror", "Non-fiction", "Romance", "Satire"];
    console.log(genres);

    for (var i = 0; i < genres.length; i++) {
        console.log(genres[i]);
        $('ul').append("<li>"+genres[i]+"</li>")
    }

    for (var i = 0; i < genres.length; i++) {
        console.log(genres[i]);
        $('td').append("<tr><td>"+genres[i]+"</td></tr>")
    }

    $('td').each(genres, function(index, value) {
    });
});

HTML：

<body>
    <ul> </ul>
    <td> </td>
</body>

链接到我的代码结果的图片。我希望重复的行是一个表而不是一个列表。

https://imgur.com/a/uXXO3

Answer 1

看起来您正在尝试将表格行tr和列td附加到ul，即使它有效（我认为不会这样），也会不正确的HTML。您只应将tr和td附加到table，因此您需要将该元素添加到HTML中。所以你的HTML应该是这样的：

<body>
    <ul></ul>
    <table></table>
</body>

你的jQuery代码看起来像这样：

for(var i = 0; i < genres.length; i++) {
    $('ul').append("<li>" + genres[i] + "</li>");
    $('table').append("<tr><td>" + genres[i] + "</td></tr>");
}

请查看this jsfiddle以查看更完整的示例。

Answer 2

您的td应该是table。将tr放在除table之外的任何内容（如果它没有tbody），thead，tbody或tfoot都是无效的HTML

我不确定你的意思是“我希望将重复的行放入表而不是列表”。屏幕截图中的第二个元素是表。如果您想要将所有类型放在一行中，请将所有td放入单个tr。

Answer 3

也许这就是你想要的？：）

HTML：

  <body>
    <ul></ul>
    <table> </table>
  </body>

和jquery：

 var genres = ["Genre1", "Genre2", "Genre3", "Genre4", "Genre5", "Romance", "Satire"];

for (var i = 0; i < genres.length; i++) {
  console.log(genres[i]);
  $('ul').append('<li>'+ genres[i] +'</li>');
};
    $('table').append("<tr>")
    for (var i = 0; i < genres.length; i++) {
      console.log(genres[i]);
      $('table').append("<td>" + genres[i] + "</td>")
    }
    $('table').append("</tr>")

您可以在此处查看结果：https://codepen.io/radu_cruceana/pen/eeWNYj

如何创建表并将每个数组项放入使用jQuery

3 个答案: