Question

我有一个小项目正在进行中。当我向数组中添加项目时，它们将显示在我的字段下方的表格中。

我的问题是，当我尝试附加一个复选框时，它会返回[object, Object]。

我的HTML：

<div class="container">
    <input id="list-input" />
    <select id="select-status">
        <option value="on-going">on-going</option>
        <option value="completed">completed</option>
    </select>
    <button id="add">Add To List</button>
    <button id="delete">Remove From List</button>
</div>
<div class="container">
    <h1>Your List</h1>

    <div id="mylist">
        <table id="mylist">
            <thead>
                <th>ID Number</th>
                <th>Description</th>
                <th>Status</th>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <button id="clear">clear</button>
</div>

我的JavaScript：

var tasks = [];
var count = 0;

$('document').ready(function(){

    $('#add').click(function() {
        var desc    = $.trim($('#list-input').val());
        var status  = $('#select-status option:selected').val();
        var id      = Date.now();
        item        = {};

        if (!desc) {
            item.id = "";
            alert("Input a description");
            return;
        }

        item.id          = id;
        item.description = desc;
        item.status      = status;
        tasks.push(item);

        var tr  = "<tr>";
        var td1 = "<td id="+ item.id +">" + item.id + "</td>";
        var td2 = "<td>" + item.description + "</td>";
        var td3 = "<td>" + item.status + "</td>";
        var td4 = "<td>" + $('<input/>',{'type':'checkbox'}) + "</td>" ;

        $("#mylist tbody").append(tr + td1 + td2 + td3 + td4);

        //clear input field
        $('#list-input').val('');
    });

    //clear list function
    $('#clear').click(function(){
        tasks = [];

        $('#mylist tbody').empty();

        setTimeout(function(){
            alert("List is now empty!");
        }, 500);

    });

    //remove list function

    $('#delete').on('click', function() {
      $('#mylist input:checked').closest('#item').remove();
    });
});

Answer 1

这一行：

var td4 = "<td>" + $('<input/>',{'type':'checkbox'}) + "</td>" ;

创建一个jQuery对象，然后用一个字符串连接它。大多数对象没有实现toString（而jQuery对象没有），所以你得到了默认的"[object Object]"字符串。

您已经在使用标记，继续这样做：

var td4 = "<td><input type='checkbox'></td>" ;

...或者将代码切换为使用对象。

在return [object，Object]中添加一个复选框

1 个答案: