在AJAX成功时动态生成表行

Question

我想要做的是:当用户点击发送时,我希望数据显示在一个<tr/>(每个字段嵌套在自己的字段中<td/>).

我已经编写了一个实际执行此操作的脚本,但系统尚未动态.

HTML:

<form name="contact" method="post" action="">
    <p>
        <label for="name">Name</label>
        <input type="text" name="name" id="name" />
    </p>
    <p>
        <label for="age">Age</label>
        <input type="text" name="age" id="age" />
    </p>
    <p>
        <label for="mail">Mail</label>
        <input type="text" name="mail" id="mail" />
    </p>
    <p>
        <input type="submit" name="submit" id="submit" value="Send" />
    </p>
</form>
<table id="results"></table>

JS:

$(function() {
    $("#submit").click(function() {

        var name = $("input#name").val();
        var age = $("input#age").val();
        var mail = $("input#mail").val();

        var dataString = [name, age, mail];
        var n = dataString.length;

        $.ajax({
            type: "POST",
            url: "process.php",
            data: dataString,
            success: function() {
                $('#results').append(
                    $('<tr>')
                        .append($('<td>').append(dataString[0]))
                        .append($('<td>').append(dataString[1]))
                        .append($('<td>').append(dataString[2]))
                );
            }
        });
        return false;
    });
})

如您所见,我手动抓取字段dataString[x],但是如何使该系统动态化？

我正在考虑使用如下的循环,但我似乎无法使其工作:

for(var i = 0; i < n; i++){
    row += "$('<td>').append("+dataString[i]+")";
}

$('#results').append(
    $('<tr>')
        .append(row)
);

有关如何做到这一点的任何提示？或者你会有一个更清洁的解决方案？

Answer 1

这行代码:

row += "$('<td>').append("+dataString[i]+")";

它不是创建一个元素并将数据附加到它,它只是连接row变量和一个字符串文字(包含jQuery代码).

为什么不创建row一个实际的行 - 而不是包含行内容的字符串 - 然后将其附加到success回调处理程序中:

var row = $('<tr>');
for(var i = 0; i < n; i++) {
    row.append($('<td>').html(dataString[i]));
}

然后:

$('#results').append(row);