javascript - 我可以使用 jQuery 将表添加到另一个表吗？

Question

我正在尝试使用 jQuery 将表“new”添加到表“lasttable”，但我无法得到结果。我是在做正确的事情还是我误解了 prepend 的含义？

<table id ="lasttable" class="add" border="1px" width="100%">
<tr class="header"><td class="location" colspan="7">New Item</td></tr>
</table>

我的 jQuery：

$("#lasttable").prepend("<table id=\"new\" class=\"add\" border=\"1px\" width=\"100%\">"
+"<tr class=\"header\"><td class=\"stretch\"><a class=\"eloc\" rel=\"leanModal\" href=\"#modal_location\"><img src=\"images/edit-icon.png\" alt=\"Location\"></a></td><td class=\"location\" colspan=\"6\"></td></tr>
+"</tbody></table>");

Answer 1

假设您损坏的选择器是一个错字，我认为您想将新表.before()放在现有表中。

$("#lasttable").before("new content here");

Answer 2

这里

$("#lasttablet") //this is wrong selector since your id is lasttable

改成

$("#lasttable")

更新

替换这个

$("#lasttable").prepend("<table id=\"new\" class=\"add\" border=\"1px\" width=\"100%\">"
+"<tr class=\"header\"><td class=\"stretch\"><a class=\"eloc\" rel=\"leanModal\" href=\"#modal_location\"><img src=\"images/edit-icon.png\" alt=\"Location\"></a></td><td class=\"location\" colspan=\"6\"></td></tr>
+"</tbody></table>");

和

$("#lasttable").prepend("<table id=\"new\" class=\"add\" border=\"1px\" width=\"100%\"><tr class=\"header\"><td class=\"stretch\"><a class=\"eloc\" rel=\"leanModal\" href=\"#modal_location\"><img src=\"images/edit-icon.png\" alt=\"Location\"></a></td><td class=\"location\" colspan=\"6\"></td></tr></tbody></table>");

在这里摆弄

问题在于转义"，删除+符号并将其用作单个字符串..应该可以工作..

Answer 3

您的代码中有拼写错误，第二行缺少右引号。

+"<tr class=\"header\"><td class=\"stretch\"><a class=\"eloc\" rel=\"leanModal\" href=\"#modal_location\"><img src=\"images/edit-icon.png\" alt=\"Location\"></a></td><td class=\"location\" colspan=\"6\"></td></tr>"

现场演示

$("#lasttable").prepend("<table id=\"new\" class=\"add\" border=\"1px\" width=\"100%\">"+"<tr class=\"header\"><td class=\"stretch\">123<a class=\"eloc\" rel=\"leanModal\" href=\"#modal_location\"><img src=\"images/edit-icon.png\" alt=\"Location\"></a></td><td class=\"location\" colspan=\"6\"></td></tr></tbody></table>");

Answer 4

前置的逻辑在这里是错误的

The .prepend() method inserts the specified content as the first child of each element in the jQuery collection (To insert it as the last child, use .append()).

来自Jquery Prepend()

理想情况下，您应该做类似的事情

$("#lasttable").prepend("<tr><td><table id=\"new\" class=\"add\" border=\"1px\" width=\"100%\">"
+"<tr class=\"header\"><td class=\"stretch\"><a class=\"eloc\" rel=\"leanModal\" href=\"#modal_location\"><img src=\"images/edit-icon.png\" alt=\"Location\"></a></td><td class=\"location\" colspan=\"6\"></td></tr>
+"</tbody></table></td></tr>");

Prepend() will add tr element inside your table:lasttable at the starting position OR If you want to add a table before your existing table then you can use before() instead of prepend() Something like:

$("#lasttable").before("<tr><td><table id=\"new\" class=\"add\" border=\"1px\" width=\"100%\">"
+"<tr class=\"header\"><td class=\"stretch\"><a class=\"eloc\" rel=\"leanModal\" href=\"#modal_location\"><img src=\"images/edit-icon.png\" alt=\"Location\"></a></td><td class=\"location\" colspan=\"6\"></td></tr>
+"</tbody></table></td></tr>");

Answer 5

You got one typo indeed, but either use .before() as karim79 suggested, or prepend only the <tr>s to #lasttable. I think .before() is easier to implement, but depending on what you're working on it might be better to prepend the TRs. Something like this:

var trs = $("#new").html();
$("#lasttable").prepend(tds);

should work.

If you do what you're doing now it will prepend the entire table to #new, and I doubt if a table inside another table is valid markup.

Answer 6

try with this one: just removed the + and make a full string

 $("<table id=\"new\" class=\"add\" border=\"1px\" width=\"100%\"><tr class=\"header\"><td class=\"stretch\"><a class=\"eloc\" rel=\"leanModal\" href=\"#modal_location\">asdfasdfa<img src=\"images/edit-icon.png\" alt=\"Location\"></a></td><td class=\"location\" colspan=\"6\"></td></tr></tbody></table>").prependTo('#lasttable');

and with .prepend()

 $('#lasttable').prepend("<table id=\"new\" class=\"add\" border=\"1px\" width=\"100%\"><tr class=\"header\"><td class=\"stretch\"><a class=\"eloc\" rel=\"leanModal\" href=\"#modal_location\">asdfasdfa<img src=\"images/edit-icon.png\" alt=\"Location\"></a></td><td class=\"location\" colspan=\"6\"></td></tr></tbody></table>");

you can checkout here: http://jsfiddle.net/Q2tQd/