在包含 HTML 元素的 JS var 中添加 HTML 代码答案

【问题标题】：Add HTML code inside of a JS var that contains an HTML element在包含 HTML 元素的 JS var 中添加 HTML 代码
【发布时间】：2016-09-01 15:33:51
【问题描述】：

我需要在我使用淘汰赛js的html表中单击一行后添加任务列表。问题是我只是从我的 data 连续添加最后一个任务，我需要在我的元素 "$taskSelected" 中为每个任务添加一个新的 TR .这是我的代码

  self.retrieveTask = function(data, event) {
                if (event.type=="click") {
                    var id = data.Id;
                    var $taskSelected = event.currentTarget.parentElement.nextElementSibling;
                    $.get("@Url.Action("Method", "Controller")", { id: id })
                        .done(function(data) {
                            $.each(data, function(key, value) {
                                var html = "<tr><td>" +
                                    "</td>" +
                                    "<td>" +
                                    "  <div >" +
                                    + value.Type +
                                    "</div> " +
                                    "</td>" +
                                    "<td>" +
                                    " <div >" +
                                    value.Id +
                                    "</div> " +
                                    "</td>" +
                                   "</tr>";
                                $taskSelected.innerHTML=html;

                            });

                        }).fail(function() {
                            alert("error");
                        });
                };

            }

var $taskSelected 包含另一行“<tr> </tr>”基本上我想嵌套行。请给点建议

【问题讨论】：

你不能嵌套rows：“允许的内容：零个或多个或元素，或它们的混合”。如果您尝试创建嵌套行，“子”行的开始标记将关闭“父”行，并创建一个新行。

标签： javascript jquery html innerhtml

【解决方案1】：

试试这个：

 self.retrieveTask = function(data, event) {
            if (event.type=="click") {
                var id = data.Id;
                var $taskSelected = event.currentTarget.parentElement.nextElementSibling;
                $.get("@Url.Action("Method", "Controller")", { id: id })
                    .done(function(data) {
                        var html = "";
                        $.each(data, function(key, value) {
                            html += "<tr><td>" +
                                "</td>" +
                                "<td>" +
                                "  <div >" +
                                + value.Type +
                                "</div> " +
                                "</td>" +
                                "<td>" +
                                " <div >" +
                                value.Id +
                                "</div> " +
                                "</td>" +
                               "</tr>";

                        });
                       $taskSelected.innerHTML=html;

                    }).fail(function() {
                        alert("error");
                    });
            };

        }

我所做的只是将var html 移出each 循环。这可以确保您之前的所有 HTML 都保留在变量中，否则每次运行循环时都会覆盖 html（这就是为什么您只输出最后一个 ;)）。

【讨论】：

感谢您的回答，确实范围有问题，顺便说一下，我最严重的错误是我的表结构，正如 Teemu 所说。我修复它改变了我的表的结构，并在当前行之后添加了 $(html).insertAfter($taskSelected)。再次感谢。