在包含HTML元素的JS变量中添加HTML代码

Add HTML code inside of a JS var that contains an HTML element

本文关键字:HTML 添加 变量 代码 包含 元素 JS      更新时间:2023-09-26

我需要添加一个任务列表后,单击一行在html表我使用knockout js。问题是,我只是从我的数据添加最后一个任务在一行中,我需要在我的元素"$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> "基本上我想嵌套行。

试试这个:

 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(这就是为什么只输出最后一个;))。