objectボタンの代わりにオブジェクトが表示される

Question

私はjs経由でビルドしているテーブルを持っています。このテーブルには、閉じるときにjqueryモーダルダイアログからデータが表示されますが、各行にデータが表示されます。さらなる処理のために各行に表示するボタンが必要です。

ボタンを列に追加すると、ボタンの代わりに[オブジェクトオブジェクト]が表示されます。私は同様の質問hereを見て、その列には何も得ていません。私はかなり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> 

Answer 1

ただ、テーブルにTDのVAR追加：ここ

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

Exmapleを： https://jsfiddle.net/00q44gyf/