javascript - 使用jquery在表中显示数据

Question

我有一个输入文本框和一个按钮...

我想要的是当任何数字被写入输入并单击按钮时，我需要在表格中显示一些虚拟数据..

我确实喜欢这样：

JavaScript

$("button#submitid").click(function () {
$("#datatable").toggle();
    $("#datatable").append('<tr id="foo"><td>hi</td><td>hi</td><td>hi</td><td>hi</td><td>hi</td><td>hi</td></tr>');
});

我的问题是，当我第二次提交时，表格没有显示，当我第三次提交时，它正在显示……我不知道哪里出了问题……有人可以帮我解决这个问题吗……？

Answer 1

问题在于这一行：$("#datatable").toggle();. 每次单击按钮时您都会切换您的表格，因此它只会每隔一次显示一次（即使您每次单击都会附加）。

您可以只使用$("#datatable").show();或添加一些实际逻辑来判断表何时可见或不可见。

Answer 2

不要切换（）只是显示（）

$("button#submitid").click(function () {
    $("#datatable").append('<tr id="foo"><td>hi</td><td>hi</td><td>hi</td><td>hi</td><td>hi</td><td>hi</td></tr>');
    $("#datatable").show();
});

编辑对 OP 评论的回应http://jsfiddle.net/e254w/

// json data object
var data = JSON.parse('{ "1": ["a","b","c"], "2": ["x","y","z"] }');
$("#submitid").click(function() {
    var rowId = $("#number").val();
    var rowData = data[rowId];
    if(rowData) {
        var tr = $("<tr></tr>").attr("id", "datatable-row-" + rowId);
        for(var col=0; col<rowData.length; col++)
            tr.append($("<td></td>").text(rowData[col]));
        $("#datatable").append(tr);
        $("#datatable").show();
    } else {
        alert("Row doesn't exist in json object: " + rowId);
    }
});