使用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);
    }
});