버튼 대신 object 객체가 표시됩니다.

Question

나는 js를 통해 빌드하는 테이블을 가지고 있으며이 테이블에는 닫을 때 jquery 모달 대화 상자에서 채워지는 행이 있습니다. 데이터는 각 행에 표시되지만 원하는 것도 있습니다. 추가 처리를 위해 각 행에 표시 할 단추가 있어야합니다.

단추에 열을 추가하면 단추 대신 [개체 개체]가 표시됩니다. 나는 유사한 질문을 here보고 칼럼에 아무것도 얻지 못했다. 나는 JS에 아주 잘 알고 있고 약간의 원조를 사용할 수있다. 코드는 아래와 같다. 나는 내가 뭘 잘못하고 있는지 알아낼 수 없다. 여기

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

Exmaple : 나는 아래이 테이블에 TD를 추가하고

$(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"); 
}); 

, 나는

<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를 추가 TD를의 코드에서 주석이 : https://jsfiddle.net/00q44gyf/