对象显示对象而不是按钮

obJect Object showing instead of button

本文关键字:对象 按钮 显示      更新时间:2023-09-26

我有一个表,我正在通过js构建,如果这张表的行正在从jquery模态对话框关闭后填充,数据显示在每一行,但我想要的也是一个按钮显示在每一行进一步处理是需要的。

当我将按钮添加到列时,它显示的是[object object]而不是按钮。我在这里看了一个类似的问题,在专栏中没有得到任何东西。我很了解JS,可以使用一些帮助的代码如下。我似乎不知道我做错了什么。

$(function () {
var dialog, form,
skuNumber = $("#skuNumber");
productName = $("#productName");
description = $("#description");
quantity = $("#quantity");
border = $("#border");
inkColor = $("#inkColor");
allFields = $([]).add(skuNumber).add(productName).add(description).add(quantity).add(border).add(inkColor);
tips = $(".validateTips");
function addItem() {
    var remove = $('<input type="button" id="remove" value="remove" style="width:80px" class="btn btn-danger" />');
    var td = $("<td></td>");
    td.append(remove);
    var valid = true;
    allFields.removeClass("ui-state-error");
    if (valid) {
        $("#myTest tbody").append("<tr>" +
          "<td>" + skuNumber.val() + "</td>" +
          "<td>" + productName.val() + "</td>" +
          "<td>" + description.val() + "</td>" +
          "<td>" + quantity.val() + "</td>" +
          "<td>" + border.val() + "</td>" +
          "<td>" + inkColor.val() + "</td>" +
          "td" +
          "</tr>");
          dialog.dialog("close");     
    }
    return valid;
}
dialog = $("#dialog-form").dialog({
    autoOpen: false,
    height: 550,
    width: 650,
    modal: true,
    buttons: {
        "Add A Line Item": addItem,
        Cancel: function () {
            dialog.dialog("close");
        }
    },
    close: function () {
        form[0].reset();
        allFields.removeClass("ui-state-error");
    }
});
form = dialog.find("form").on("submit", function (event) {
    event.preventDefault();
    addItem();
});
$("#add").button().on("click", function () {
    dialog.dialog("open");
});

我将td添加到下面的表中,我在代码

中注释了td
<table id="myTest" class="table table-responsive">
                <thead>
                <tr>
                    <td>Sku Number</td>
                    <td>Product Name</td>
                    <td>Description</td>
                    <td>Quantity</td>
                    <td>Border</td>
                    <td>Ink Color</td>
                    <td>Action</td>
                </tr>
                </thead>
                <tbody>
                    <tr>
                        @*<td>Test</td>
                        <td>Test</td>
                        <td>Test</td>
                        <td>Test</td>
                        <td>Test</td>
                        <td>Test</td>
                        <td><input type="button" id="remove" value="remove" style="width:80px" class="btn btn-danger" /></td>*@
                    </tr>
                </tbody>                
            </table>

只需将td变量添加到表中:

   $('#myTest> tbody tr:last').append(td);

范例:https://jsfiddle.net/00q44gyf/