使用jquery在表中显示数据

Displaying the data in a table using jquery

本文关键字：显示 数据 jquery 使用      更新时间：2023-09-26

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

我想要的是，当任何数字被写入输入并点击按钮时，我需要在表中显示一些伪数据。。

我确实喜欢这个：

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

我的问题是当我第二次提交时，表格没有显示，当我第三次提交时它显示。。。我不知道哪里出了问题。。有人能帮我吗。。。？

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

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

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

$("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);
    }
});
相关文章：