使用jquery在表中显示数据

Question

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

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

我做了like this：

的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);
    }
});