javascript - 使用 Javascript 向表格添加按钮

Question

function OnSuccess(xml) {

  document.getElementById("people").innerHTML = "<tr><td>Employee ID</td><td>First Name</td><td >Last Name</td></tr>";

  $(xml).find('Table').each(function () {
    var id = $(this).find('EmployeeID').text();
    var fn = $(this).find('FirstName').text();
    var ln = $(this).find('LastName').text();

    //Create  button
    var btn = document.createElement("input");

    //Set the attributes
    btn.setAttribute("onclick", "ServiceCall3(id)");
    btn.setAttribute("type", "button");
    btn.setAttribute("value", "Info");
    btn.setAttribute("name", id);
    $('#people').append('<tr><td>' + id + '</td><td>' + fn + '</td><td>' + ln + '</td><td> '+ btn + '</td></tr>')
  }

)};

嘿，这是我的功能，它从 xml 文件创建一个表。 我需要的是添加一个按钮，其 id 与从 xml 读取的参数相同，即每行的末尾。 我得到的不是按钮而是 [object HTMLInputElement]。 请帮忙。

很好， react 很快。 你现在能告诉我如何将 id 值传递给 ServiceCall3 吗？或者在 ServiceCall3 中使用它？

function serviceCall3(id) {
            $.ajax({
                type: "POST",
                url: "../TestWebService.asmx/GetAll",
                data: "{'data' :" + id + "}",
                contentType: "application/json; charset=utf-8",
                dataType: "xml",
                success: OnSuccess3,
                error: OnError
            });
             }  

Answer 1

问题是您正在尝试将 DOM 元素 (btn) 连接成一个字符串(这会导致 [object HTMLInputElement])。相反，您应该附加它:

$('#people').append(
    $('<tr></tr>').append(
        $('<td></td>').text(id),
        $('<td></td>').text(fn),
        $('<td></td>').text(ln),
        $('<td></td>').append(btn)
    )
);

这会创建一行和四个单元格，但不会将内容连接到原始 HTML 中。